javascript - 我正在尝试旋转包含嵌套 div 的 div，而 div 是垂直反射的吗？

Question

我试图在鼠标悬停时将此 ccs 艺术旋转 360 度，但由于某种原因，整个 div 似乎反射(reflect)在原点位置下。我对 react 和 css 还很陌生，所以老实说，我不确定为什么当我将鼠标悬停在图像上时图像会垂直翻转

默认 View .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

感谢您的帮助!

Answer 1

我做了一些样式设计并尝试使用不同的变换基数，它更接近您的需要。您仍然需要为转换源数字尝试更多的数字集，即 .LilGuy:hover 类中的数字。

这里是codesandbox链接

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

如果你将鼠标悬停在它的某些部分上它仍然会闪烁，因为那个 div 有很大的尺寸并且当你悬停在 div 的部分上时 div 将在悬停时移动，这会导致结束悬停效果并尝试把 div 放回原处，所以在那种情况下它会闪烁一下。但是，您可以更改我用来满足您需要的转换源编号。