3D空间转换

一、空间转换 3D

3D坐标系

3D 坐标系比2D 多了一个Z轴。

一定要记住3个坐标轴取值的正反：

• X 轴 往右越大，是正值， 否则反之

• Y 轴 往下越大，是正值，否则反之

• Z轴 （指向我们）越大，是正值，否则反之

3D位移

有完整写法：

 transform: translate3d(x, y, z);

只不过在很多情况下，我们经常喜欢分开写：

transform: translateX(100px);
transform: translateY(100px);
transform: translateZ(100px);

透视

透视的作用： 空间转换时，为元素添加近大远小、近实远虚的视觉效果

语法:

 perspective: 800px;

透视注意事项：

1. 取值范围经常在 800px ~ 1200px 之间。

2. 一定给父亲添加

3. 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

4. 透视 默认透视的角度,是父盒子正中间,如果内容不在盒子中间会有一个倾斜的效果

5. 其中 d 为透视的距离

6. z 是 translateZ 的距离， 这个距离靠近我们，盒子越大

7. • 

3D旋转

有了透视的加持，我们3d旋转效果会比较明显。

rotateX

类似单杠旋转。

注意：默认的旋转中心在盒子的中心位置。

 body {
     /* 父级添加透视 */
     perspective: 400px;
}
​
img {
    transition: all 1s;
}
​
img:hover {
    transform: rotateX(360deg);
}

效果展示：

rotateY

类似钢管舞。

body {
    perspective: 400px;
}
​
img {
    transition: all 1s;
}
​
img:hover {
    transform: rotateY(360deg);
}

效果如下：

img:hover {
            /* x轴的旋转 正值是从下往上翻  负值是从上往下翻*/
            /* transform: rotateX(-90deg); */
            /* Y轴的旋转 正值是从左往右翻 负值是从右往左翻*/
            /* transform: rotateY(-90deg); */
            /* Z轴的旋转  看起来在转圈 */
            transform: rotateZ(360deg);
            /* transform: rotate3d(X, Y, Z);
            问题?旋转的时候3个轴的值能不能一起写?不能 */
            /* transform: rotate3d(90deg, 90deg, 360deg); */
        }

左手法则

一定要搞清楚X轴和Y轴如何旋转的，旋转的度数是正值还是负值。

规则：

1. 大拇指指向X轴正向方（右）， 则四指指向的方向是旋转的方向

2. 大拇指指向Y轴正向方（下）， 则四指指向的方向是旋转的方向

立体呈现

让子盒子在父盒子内有空间的展示，此时可以给父亲添加

transform-style: preserve-3d;