Question

我试图在鼠标悬停时将此ccs art旋转360度，但是由于某些原因，整个div似乎反映在原点位置以下。我对CSS和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

感谢您的帮助！

Answer 1

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

这是codeandbox链接

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

如果您将鼠标悬停在div的某个部分上，它仍然会闪烁，因为该div的尺寸很大，并且当您将div悬停在div将从其悬停的位置移动到div的部分时，这会导致结束悬停效果并尝试将div重新放回原处，因此在这种情况下它将闪烁一下。但是，您可以更改我用来满足需要的转换源数字。

我正在尝试旋转包含嵌套div的div，并且div垂直反射？

1 个答案: