空间转换:transform 空间转换也叫3D转换

空间位移：translate

语法

1. transform: translate3d(x, y, z);
2. transform: translateX(值);
3. transform: translateY(值);
4. transform: translateZ(值);
5. 取值（正负均可）
6. 像素单位数值
7. 百分比

透视：perspective

属性（添加给父级）

1. perspective: 值;
2. 取值：像素单位数值， 数值一般在800 – 1200。
3. 作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果
4. 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离

空间旋转：rotate

1. transform: rotateZ(值);
2. transform: rotateX(值);
3. transform: rotateY(值); 左手法则： 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

立体呈现：transform-style: preserve-3d

呈现立体图形步骤

1. 盒子父元素添加transform-style: preserve-3d；
2. 按需求设置子盒子的位置（位移或旋转） 空间内，转换元素都有自已独立的坐标轴，互不干扰

空间缩放：scale

1. 语法
2. transform: scaleX(倍数);
3. transform: scaleY(倍数);
4. transform: scaleZ(倍数);
5. transform: scale3d(x, y, z);

动画：animation

实现步骤：

1. 延迟时间：动画开始执行之前要等待的时间 s/ms
2. 动画播放次数：infinite 无限次播放
3. 动画播放方向：alternate 交替播放
4. 速度曲线：默认 ease； 1. linear 匀速播放 2. steps(次数)一般配合精灵图使用
5. 执行完毕时的状态：forwards 动画会停在动画结束时的状态；
6. 注意点：
7. 动画名称和播放一次动画的时长必须写，其他属性需要就写
8. forwards不能和infinite结合使用，否则不生效
9. animation 里面属性值 不分先后顺序
10. 当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间/延迟时间
11. 暂停动画一般配合hover使用：谁在调用动画，就给谁设置:hover 去暂停动画animation-play-state: paused;