admin管理员组

文章数量:1566222

！！！透视和3D呈现不能加在同一级，透视在3D上一级盒子加！！！

目录

一：透视 ： 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>

本文标签： 越小透视屏幕pxperspective

版权声明：本文标题：18.一透视perspective:500px值越小，离屏幕越近。二①3D旋转transform: rotateX②Y(45deg)③transform: rotate3d(1,1,0,90deg) 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1725895262a1047562.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。