3D转换

最新推荐文章于 2022-10-05 22:32:15 发布

原创最新推荐文章于 2022-10-05 22:32:15 发布 · 433 阅读

0 ·

CC 4.0 BY-SA版权

CSS随手记专栏收录该内容

5 篇文章

订阅专栏

博客介绍了3D转换相关知识。在学习3D转换前需理解透视距离，即人眼到3D元素的距离，其属性为perspective，要加在3D元素父元素上。还介绍了3D旋转，属性是transform，有rotateX、rotateY、rotateZ和rotate3D等取值，常用rotate3D实现3轴联动效果。

透视距离：在学3D转换之前，我们必须理解什么是透视距离？透视距离模拟人的眼睛到 3D 元素之间的距离

属性：perspective

注意：该属性我们需要把他加在 3D元素的父元素上

3D 旋转

属性：transform

取值：

rotateX (x deg)，以 x 轴为中心旋转

rotateY (y deg)，以 y 轴为中心旋转

rotateZ (z deg)，以 z 轴为中心旋转

rotate3D (x, y, z, deg)，x, y, z 取值为大于0 的数字时，表示该轴要参与旋转

正常情况下，我们都会用 rotate3d 这个3轴联动的效果

<style>
 #pre{    /*父元素*/
            width: 400px;
            height: 400px;
            border: 2px solid red;
            margin: 0 auto;
            perspective:200px /*透视距离, 人的眼睛距离幕布的距离*/
        }
        #d1{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 100px auto;
            font-size: 50px;
            transform: rotate3d(10,10,10,2deg); /*x, y, z轴的位置*/
                /*transform: rotate3d() 这个函数指的是3个方位，都要动*/
            
        }
    </style>
</head>
<body>
    <div id = "pre">    <!-- 3D 必须建立在父元素之上-->
        <div id = "d1">3D 旋转</div>
    </div>