其他分享
首页 > 其他分享> > 18.一透视perspective:500px值越小，离屏幕越近。二①3D旋转transform: rotateX/②Y(45deg)③transform: rotate3d(1,1,0,90deg)

18.一透视perspective:500px值越小，离屏幕越近。二①3D旋转transform: rotateX/②Y(45deg)③transform: rotate3d(1,1,0,90deg)

作者：互联网

目录

一：透视 ： perspective:500px;值越小，离屏幕越近

加透视和不加透视的区别：

​

二：3D旋转要加透视的

①X轴45度(deg)：

②Y轴45度（deg）:

③Z轴45deg

一：透视 ： perspective:500px;值越小，离屏幕越近

加透视和不加透视的区别：

 

二：3D旋转要加透视的

①X轴45度(deg)：

<style>
        body {
            perspective: 300px;
        }

        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }

        img:hover {
            transform: rotateX(45deg);
        }
    </style>
</head>

<body>
    <img src="../media/pig.jpg" alt="">
</body>

②Y轴45度（deg）:

<style>
        body {
            perspective: 500px;
        }

        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }

        img:hover {
            transform: rotateY(45deg);
        }
    </style>
</head>

<body>
    <img src="../media/pig.jpg" alt="">
</body>

③Z轴45deg

 <style>
        body {
            perspective: 500px;
        }

        img {
            display: block;
            margin: 100px auto;
            transition: all 1s;
        }

        img:hover {
            /* transform: rotateZ(180deg); */
            /* transform: rotate3d(x,y,z,deg); */
            /* transform: rotate3d(1, 0, 0, 45deg); */
            /* transform: rotate3d(0, 1, 0, 45deg); */
            transform: rotate3d(1, 1, 0, 45deg);
        }
    </style>
</head>

<body>
    <img src="../media/pig.jpg" alt="">
</body>

标签：img,500px,18,45deg,transform,perspective,透视
来源： https://blog.csdn.net/lazylYYY/article/details/119085407