CSS之3D转换（translate3d，透视perspective，旋转rotated3，transform-style)

目录

1、translate3d

2、透视perspective

3、rotated3d旋转

4、3D呈现transform-style（重要)

---

1、translate3d

在浏览器中，y轴正方向垂直向下，x轴正方向水平向右，z轴正方向指向外面。

z轴越大离我们越近，即看到的物体越大。z轴单位一般是px。z轴说物体到屏幕的距离。

/* transform: translate3d(100px, 100px, 100px); x,y不能省略写，不想要就写0。

2、透视perspective

透视又称视距，人的眼睛到屏幕的距离，距离视觉点越近在电脑上成像越大。

根据近大远小，物体遮挡后面看不见的原理。

透视写在被观察元素的父盒子上，透视越小（距离），我们看到的越大。

视距越小放大效果越明显，translateZ越大放大效果越明显。

当translateZ>perspective时，物体移到了视点后方，无法成象，所以看不到盒子。

3、rotated3d旋转

单位deg。旋转的方向依据左手准则，左手大拇指指向坐标轴的正向，其余手指弯曲的方向就是坐标轴的正向。

transform: rotate3d(1, 1, 1, 45deg);

这表示x,y,z都正向旋转45deg,也可以只rotatedX...

4、3D呈现transform-style（重要)

/* transform-style: preserve-3d; */默认是flat，不开启，代码写给父盒子但是影响的是子盒子。

开启3d效果。