一、空间转换
使用transform属性实现元素在空间内的位移、旋转、缩放等效果
1.空间位移
使用translate实现元素空间位移效果
语法
1.transform: translate3d(x, y, z); 2. transform: translateX(值); 3. transform: translateY(值); 4. transform: translateZ(值);
取值（正负均可）
- 像素单位数值 2. 百分比
2.透视
使用perspective属性实现透视效果
属性（添加给父级）
- perspective: 值;
取值：
像素单位数值， 数值一般在800 – 1200。
作用
空间转换时，为元素添加近大远小、近实远虚的视觉效
3.空间旋转
使用rotate实现元素空间旋转效果
左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
拓展
- rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
- x，y，z 取值为0-1之间的数字
4.立体呈现
使用transform-style: preserve-3d呈现立体图形 perspective只增加近大远小、近实远虚的视觉效果。
实现方法
1.添加 transform-style: preserve-3d; 2.使子元素处于真正的3d空间
呈现立体图形步骤
- 盒子父元素添加transform-style: preserve-3d； 2. 按需求设置子盒子的位置（位移或旋转）
注意
1.空间内，转换元素都有自已独立的坐标轴，互不干扰
5.空间缩放
使用scale实现空间缩放效果
语法
- transform: scaleX(倍数); 2. transform: scaleY(倍数); 3. transform: scaleZ(倍数); 4. transform: scale3d(x, y, z)
二、动画
使用animation添加动画效果 动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停） 动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面 l 构成动画的最小单元：帧或动画帧
1.动画的实现步骤
使用animation添加动画效果
2.动画属性
1.使用animation相关属性控制动画执行过程
注意：
- 动画名称和动画时长必须赋值
- 取值不分先后顺序
- 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间 2.使用steps实现逐帧动画
2.使用steps实现逐帧动画
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。 1. animation-timing-function: steps(N)； 2. 将动画过程等分成N份
精灵动画制作步骤
- 准备显示区域 2.设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图 3. 定义动画 4. 改变背景图的位置（移动的距离就是精灵图的宽度） 5. 使用动画6. 添加速度曲线steps(N)，N与精灵图上小图个数相同 7.添加无限重复效果
