3维坐标系

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

• x轴 水平向右
  
• y轴 垂直向下
  
• z轴 垂直屏幕 由屏幕里面指向屏幕的外面

3d移动 translate3d

3d移动在2d移动的基础上多加了一个可以移动的方向，就是z轴方向
语法：

1. transform:translate3d(x,y,z) 其中 x y z 分别指要移动的轴的方向的距离
   
2. translform:translateX(100px) 仅仅是移动在x轴上移动
   
3. translform:translateY(100px) 仅仅是移动在Y轴上移动
   
4. translform:translateZ(100px) 仅仅是移动在Z轴上移动

因为z轴是垂直屏幕，由里指向外面，所以 默认是看不到元素在z轴的方向上移动，想要看到，可以使用下面的 视距 属性设置

视距 perspective了解

人在看物体时，有个规律，如 远的物体看起来小 近的物体看起来大
perspective 就是用来设置 人 和 物体 的距离

如 我们想要看到 物体 在z轴上的移动 的 远大近小 效果时

1. 设置物体的 translateZ 一般大于 0 如 transform:translateZ(100px)
   
2. 设置 人和物体的距离 - 视距 这个值规定要设置给物体的父元素 perspertive:1000px
   
3. 动态改变物体的 translateZ 即可观察效果

translateZ的值和perspertive都要大于0 否则容易出现兼容性问题

3d旋转 rotate3d

3d旋转指可以让元素在3维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转 对于元素旋转的方向的判断
比如要判断某元素沿着x轴是怎么旋转的

1. 左手的手拇指指向 x轴的正方向
   
2. 其余手指的弯曲方向就是该元素沿着x轴旋转的方向了

语法

1. transform:rotateX(45deg); 沿着x轴正方向旋转 45度
   
2. transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
   
3. transform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
   

4. transform:rotate3d**(x,y,z,deg)** 沿着自定义轴旋转 deg为角度 了解即可
   

   3D缩放 scale3d

   3d缩放 可以控制元素 在 x轴，y轴，z轴上的缩放，也可以理解为 宽，高，厚度的缩放

5. transform: scale3d(1 ,1,2); 宽，高 缩放一倍，厚度放大两倍
   

6. transform: scaleX(1) 只缩放宽
   
7. transform: scaleY(1) 只缩放高
   

8. transform: scaleZ(1) 只缩放厚
   

   视距原点 perspective-origin 了解

   视距可以设置 人 和 物体 之间的距离 也就是z轴方向的距离
   而 视距原点 可以设置 人 站在x轴和y轴的位置。
   

9. 视距原点和视距一样，也是设置给要观察元素的父元素上
   

10. perspective-origin:center center; 默认值是元素的中心点
    
11. perspective-origin:10px； 指定了一个参数的时候，第二个参数默认为center 也就是50%；
    
12. perspective-origin:10% %； 百分比都是相对于自身的宽度和高度
    

    转换样式 transform-style

    结合3d立方体案例理解，控制子元素是否开启3维立体环境

• transform-style: flat; 平面模式 - 不开启3维立体环境
  
• transform-style: preserve-3d; 3维立体环境

1. 百分比单位都是相对于自身
   
2. 视距、视距原点、转换样式 这三个属性都是给父元素添加的