css3-3D旋转透视位移等属性

最新推荐文章于 2024-03-05 17:29:30 发布

约德尔蒙

最新推荐文章于 2024-03-05 17:29:30 发布

阅读量1.4k

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/gyq04551/article/details/53263738

版权

CSS3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<!--------------------------------3D变换之旋转------------------------------------------>
            <!-- 取值可以是正 可以是负 负值朝反方向转-->
            <!-- 绕X轴顺时针旋转 360度-->
            <!--.rotateX:hover img{
            transform:rotateX(360deg);
            }-->

            <!--绕Y轴顺时针旋转 360度 -->
            <!--.rotateX:hover img{
            transform:rotateY(360deg);
            }-->

            <!--绕Z轴顺时针旋转 360度 -->
            <!--.rotateX:hover img{
            transform:rotateZ(360deg);
            }-->

<!----------------------------------3D变换之位移------------------------------------------->


            <!-- 沿着X轴正方向移动 300px-->
            <!--.rotateX:hover img{
            transform:translateX(300px);
            }-->

            <!-- 沿着Y轴正方向移动 300px-->
            <!--.rotateX:hover img{
            transform:translateY(300px);
            }-->

            <!-- 沿着Z轴正方向移动 300px-->
            <!--.rotateX:hover img{
            transform:translateZ(300px);
            }-->

<!--------------------------------3D变换之透视------------------------------------------->

            <!--透视-->
            <!-- 透视 设置的 用户 眼睛和屏幕的距离
                仅仅只是视觉呈现出3d 效果，并不是正真的3d
             -->
            <!--perspective: 400px;-->

            <!--可以让里面的子盒子保持3d 效果，加给父盒子-->
            <!-- preseve-3d: 让子盒子 位于3d空间里面-->
            <!--flat： 子盒子被扁平化-->
            <!--transform-style:preserve-3d;-->
</body>
</html>

约德尔蒙

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
css3-3D旋转透视位移等属性

 
复制链接

扫一扫