一.空间转换

1.是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同

2.语法

transform: translate3d(x, y, z);

transform: translateX(值);

transform: translateY(值);

transform: translateZ(值);

3.属性（添加给父级）

 perspective:

取值：像素单位数值， 数值一般在800 – 1200。

作用

空间转换时，为元素添加近大远小、近实远虚的视觉效果

4.左手法则

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

5.transform-style: preserve-3d

 盒子父元素添加transform-style: preserve-3d；

 按需求设置子盒子的位置（位移或旋转）

二.动画

1.使用animation添加动画效果

定义动画 @keyframes 动画名称{

from {}

to{}

}

使用动画

animation :动画名称 动画花费时长.

2.动画属性

animation-name

动画名称

animation

-duration

动画时长

animation

-delay

延迟时间

animation-fill-mode

动画执行完毕时状态

forwards：最后一帧状态

backwards：第一帧状态

animation-timing-function速度曲线

steps(数字)：逐帧动画

animation-iteration-count

重复次数

infinite为无限循环

animation-direction

动画执行方向

alternate为反向

animation-play-state

暂停动画

paused为暂停，通常配合:hover使用