Блог

Я пытаюсь повернуть это ccs-изображение на 360 градусов при наведении курсора мыши, но по какой-то причине весь div, похоже, отражается в исходной позиции. Я довольно новичок в react и css, поэтому, честно говоря, не уверен, почему изображение вертикально переворачивается при наведении на него курсора

DefaultView.css:

 .LilGuy:hover{
    -moz-transform: rotate(360deg) ;
    -webkit-transform:  rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
    transition: all 2s ease;
    transform-origin: center center;

}
  

DefaultView.js:

 import React from 'react';
import './DefaultView.css'

export default class DefaultView extends React.Component {


    render(){
        return(
            <div
                style={{
                    height:"100%",
                    width:"100%",
                    position:"absolute",
                    overflow:"hidden"
                }}>
                <div
                    className="bg"
                    style={{
                        background:"radial-gradient(#034FFF,#021645)",
                        position:"relative",
                        width:"100%",
                        height:"100%"
                        }}
                />
                <div className="LilGuy">
                    <div 
                        className="LilDudeOutLine"
                        style={{
                            background:"#FFFF",
                            position:"absolute",
                            width:"510px",
                            height:"510px",
                            top:"50%",
                            left:"50%",
                            transform:"translate(-50%,-50%)",
                            borderRadius:"50px"
                        }}
                    />

                    <div 
                        className="LilDude"
                        style={{
                            background:"#012787",
                            position:"absolute",
                            width:"500px",
                            height:"500px",
                            top:"50%",
                            left:"50%",
                            transform:"translate(-50%,-50%)",
                            borderRadius:"50px"
                        }}
                    />
                    <div 
                        className="eye-left"
                        style={{
                            background:"#034FFF",
                            position:"absolute",
                            width:"75px",
                            height:"75px",
                            top:"40%",
                            left:"44%",
                            transform:"translate(-50%,-50%)",
                            borderRadius:"125px"
                        }}
                    />

                    <div 
                        className="eye-right"
                        style={{
                            background:"#034FFF",
                            position:"absolute",
                            width:"75px",
                            height:"75px",
                            top:"40%",
                            left:"56%",
                            transform:"translate(-50%,-50%)",
                            borderRadius:"125px"
                        }}
                    />
                    <div 
                        className="pupil-left"
                        style={{
                            background:"#FFFF",
                            position:"absolute",
                            width:"28px",
                            height:"30px",
                            top:"38.6%",
                            left:"43.99999999%",
                            transform:"translate(-50%,-50%)",
                            borderRadius:"60px"
                        }}
                    />

                    <div 
                        className="pupil-right"
                        style={{
                            background:"#FFFF",
                            position:"absolute",
                            width:"28px",
                            height:"30px",
                            top:"38.6%",
                            left:"56%",
                            transform:"translate(-50%,-50%)",
                            borderRadius:"60px"
                            }}
                        />

                    <div 
                        className="mouth"
                        style={{
                            background:"#FFFF",
                            position:"absolute",
                            width:"150px",
                            height:"50px",
                            top:"50%",
                            left:"50%",
                            transform:"translate(-50%,-50%)",
                            borderRadius: '10px',
                            borderBottomLeftRadius: '40px',
                            borderBottom: '4px solid #034FFF',
                            borderBottomRightRadius: '40px'

                        }}
                    />
                </div> 

            </div>





        )
    }
}
  

https://gyazo.com/595b80ee2affbf4678d5f6453dd7175f

Спасибо за любую помощь!

Я немного изменил стиль и попробовал использовать разные числа на основе преобразования, это более близко к тому, что вам нужно. Вам все равно придется опробовать дополнительный набор чисел для чисел с преобразованием, тот, что в .LilGuy: класс наведения.

вот ссылка codesandbox

https://codesandbox.io/embed/6vz0nn2x1z

он все равно будет мигать, если вы наведете курсор на какую-то его часть, потому что этот div имеет большой размер, и когда вы наведете курсор на ту часть div, откуда div будет перемещен при наведении курсора, что приведет к прекращению эффекта наведения курсора и попытке вернуть div на место, так что в этом случае он будет немного мигать. Однако вы можете изменить исходные числа преобразования, которые я использовал, в соответствии с вашими потребностями.