3D坐标系

3D比2D多了一个z轴

各个轴的指向

X 轴往右越大，是正值，否则反之
Y 轴往下越大，是正值，否则反之
Z轴（指向我们）越大，是正值，否则反之

3D位移

写法：

transForm:tranlate3d(X,Y,Z)
很多情况下我们是分开来写的如下
transform:translateX()
transform:translateY()
transform:translateZ()

透视

作用：给元素添加近大远小的效果

使用： perspective: 800px;

注意事项:

取值在800ox~1200px之间，值越大视觉效果就越小反之同理
一定要给父盒子添加，受益的是子元素
透视也叫视距，就是人的眼睛看屏幕的距离

3D旋转

使用语法：

transtion:rotateZ（值）
transtion:rotateY（值）
transtion:rotateX（值）

单位：deg 正负指向尊崇左手法则判断旋转方向:

左手握住旋转轴, 大拇指指向正值方向, 手指弯曲方向为旋转正直方向

```
    x轴进行旋转:大拇指向右
```
```
    y轴进行旋转:大拇指向下
```

    z轴进行旋转:大拇指指向自己

开启3D空间。立体呈现

注意事项:开启3D立体空间给父元素设置生效的是子元素.即可继续使用3D语法使用:

/* 开启立体3d */
      transform-style: preserve-3d;

动画

动画和和过度的区别：

过渡只能设置两个状态的切换，但是动画可以控制多个状态的切换行
过渡无法无限重复执行，但是动画可以无限重复执行
过度需要触发条件，动画是直接触发条件

动画的使用分为两步：创建动画和使用动画

百分比动画比from to可以使用多个步骤

创建动画

： @keyframes 动画名称 { from {} to {}}

1.定义动画 
      @keyframes 动画名称 {
        动画开始 
        from {}
        动画结束 
        to {}
}
1.定义动画   百分比动画
      @keyframes 动画名称 {
        动画开始 
        0% {}
        动画结束 
        100% {}
      }

使用动画

谁使用谁就调用

animation：动画名称动画时长，速度曲线，延迟时间重复次数，动画方向，结束状态

常用的：

linear匀速
infinite无线循环
alternate 正常运行完成再反方向运
forwards 停留在结束的状态
steps(次数)逐帧：分多少次完成

注意事项：

使用多个动画在前一个动画后使用逗号隔开

鼠标停留在元素停止动画

语法：配合hover使用

animation-paly-state-paused

空间转换语法3D，动画的实现