Css3 3D转换

特点：

1. 近大远小
2. 物体后面遮挡不可见

三维坐标系：

三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。

X轴：水平向右为正

Y轴：垂直向下为正

Z轴：垂直屏幕向外为正

3D位移和3D旋转：

主要知识点：

3D位移：translate3d（x,y,z）

3D旋转：rotate3d(x,y,z)

透视：perspective

3D呈现transform-style

3D位移：translate3d（x,y,z）:

1. Transform:translateX(100px):仅仅是在x轴上移动
2. Transform:translateY(100px):仅仅是在y轴上移动
3. Transform:translateX(100px):仅仅是在z轴上移动，单位一般为px
4. Transform:translate3D(x,y,z):其中x,y,z分别指要移动的轴的方向的距离

透视perspective：

1. 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
2. 模拟人类的视觉位置，可认为安排一只眼睛去看
3. 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
4. 距离视觉点越近的在电脑平面成像越大，越远成像越小
5. 透视的单位是像素

透视写在被观察元素的父盒子上面：

D：就是视距，视距就是一个距离，人的眼睛到屏幕的距离

Z:就是Z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大。

3D旋转rotated：

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转

语法：

Transform:rotateX(45deg):沿着x轴正方向旋转45度

Transform:rotateY(45deg):沿着y轴正方向旋转45度

Transform:rotateZ(45deg):沿着Z轴正方向旋转45度

Transform:rotate3d(x,y,z,deg)：沿着自定义轴旋转deg角度

左手准则：

左手的拇指指向x轴的方向

其余手指的弯曲方向就是该元素沿着x轴旋转的方向

3D旋转rotate3d：transform：rotate3d（x,y,z,deg）:沿着自定义轴旋转deg角度

Xyz是表示旋转轴的矢量，是表示你是否希望沿着该轴选转，最后一个表示旋转的角度。

1. Transform:rotate3d(1,0,0,45deg)就是沿着x轴旋转45deg
2. Transform:rotate3d(1,1,0,45deg)就是沿着对角线旋转45deg

3D呈现transform-style：

1. 控制子元素是否开启三维立体环境
2. Transform-style：flat子元素不开启3d立体空间 默认的
3. Transform-style：preserve-3d；子元素开启立体空间
4. 代码写给父级，但是影响的是子盒子
5. 这个属性很重要，后面必用