admin管理员组

文章数量:1130349

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /*给父容器添加透视，增加立体感*/
            perspective:500px;
        }
        img{display: block;
            margin: 100px auto;
            transition: all 3s;

            }
        img:hover{
            /*沿X轴旋转*/
            /*transform: rotateX(180deg);*/
            /*transform: rotateY(180deg);*/
            transform: rotateZ(180deg);
            /*transform:rotate3d(1,0,0,180deg)*/
        }
    </style>
</head>
<body>
<img src="./prpject.jpg" alt="">

</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            /*给父容器添加透视，增加立体感*/
            perspective:500px;
        }
        img{display: block;
            margin: 100px auto;
            transition: all 3s;

            }
        img:hover{
            /*沿X轴旋转*/
            /*transform: rotateX(180deg);*/
            /*transform: rotateY(180deg);*/
            transform: rotateZ(180deg);
            /*transform:rotate3d(1,0,0,180deg)*/
        }
    </style>
</head>
<body>
<img src="./prpject.jpg" alt="">

</body>
</html>

 

本文标签： 透视rotateperspective

版权声明：本文标题：3D旋转rotate ， perspective透视 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1758684264a2782838.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。