3D转换11月14日

一、三维坐标系

二、3D位移

三、3D透视

四、3D呈现

---

特点：1、近大远小

           2、物体后面遮挡不可见

三维坐标系  

x轴：右正左负

y轴：下正上负

z轴：往外正，往内负

主要知识点：3D位移：translate3d（x，y，z）

                      3D旋转：rotate3d（x，y，z）

                      3D透视：perspective

                      3D呈现：transform-style

3D位移

translateZ：一般用px值，不能用百分比

x，y，z是不能省略的，如果没有就写0

如transform：translate3d（0，100px，100px)

3D透视

如果想要在网页上产生3D效果，需要透视

透视，我们也称为视距：视距是人的眼睛到屏幕的距离，单位是像素

距离视觉点越近的，在电脑平面成像越大，越远成像越小。

（注：透视写到被观察元素的父盒子上面）

3D旋转

 transform：rotateX（45deg）：沿着x轴正方向旋转45度

根据左手定则，大拇指指向坐标箭头的方向，四指弯曲的方向即为正方向

3D呈现

1、控制子元素是否开启三维立体环境。

2、transform-style：flat子元素不开启三维立体空间，默认的。

3、transform-style：preserve-3d子元素开启立体空间。

4、写代码写给父级，但是影响的是子盒子。

5、这个属性很重要，后面比用。