3D转换

在我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子

3D的特点

• 近大远小
• 物体后面遮挡不可见

当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。

三维坐标系

顾名思义三维坐标系就是指立体关键，立体空间是由三个轴共同组成的。

• x轴：水平向右 注意：x右边是正值，左边是负值
• y轴：垂直向下 注意：y下面是正值，上面是负值
• z轴：垂直屏幕 注意：往外面是正值，往里面是负值

3D移动translate3d

3D 移动在2D移动的基础上多加了一个可以移动的方向，就是Z轴方向。
语法如下

transform：translateX(100px) //仅仅在x轴上移动
transform：translateY(100px) //仅仅在y轴上移动
transform：translateZ(100px) //仅仅在z轴上移动(近大远小)
transform：translate3d(x,y,z) //其中x,y,z分别代表要移动的轴的方向的距离

注意点：
x 轴 和 y轴 可以是px像素 也可以是百分比 想对于父元素 但是z轴只能是跟px像素 z轴要结合视距使用

透视 perspective

在2D平面产生近大远小视觉立体，但是只是效果二维的，如果想产生3D效果就要结合视距来使用，因为浏览器默认的是2D效果，使用视距开启3D

我们可以把视距理解为看元素的距离，距离视觉点越近的在电脑平面成像越大，越远成像越小

语法如下：

perspective：数值px

注意：视距写在被观察元素的父盒子身上

3D旋转rotate3d

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

语法如下

transform：rotateX(度数deg) //沿着x轴正方向旋转
transform：rotateY(度数deg) //沿着Y轴正方向旋转
transform：rotateZ(度数deg) //沿着Z轴正方向旋转

我们还可以自定义transform：rotate3d(x,y,z,deg) 比如transform：rotate3d(1,0,0,45deg)这句话意思是只沿着x轴45度旋转 y和z轴不旋转

z轴旋转 正方向为顺时针，负方向为逆时针

我们可以借助手指法来记住x轴旋转正反的方向 手指弯曲的方向为正方向

我们可以借助手指法来记住Y轴旋转正反的方向 手指弯曲的方向为正方向

3D呈现transfrom-style

这属性是控制子元素是否开启三维立体环境，在浏览器中子元素默认是不开起3d空间的 这时候我们就需要使用

transfrom-style：preserve-3d子元素开启立体空间

注意：代码是写到父级，但是影响的是子盒子