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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/gyq04551/article/details/53263738
<!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>

展开阅读全文

没有更多推荐了,返回首页