空间转换
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间转换也叫3D转换
属性：transform
空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间位移
目标：使用translate实现元素空间位移效果
语法:
1,transform: translate3d(x, y, z);
2,transform: translateX(值);
3,transform: translateY(值);
4,transform: translateZ(值);
取值（正负均可）:像素单位数值 百分比
透视
目标：使用perspective属性实现透视效果
属性（添加给父级）:perspective:值;
取值：像素单位数值，数值一般在800–1200。
视距:透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
作用:空间转换时，为元素添加近大远小、近实远虚的视觉效果
空间旋转
目标：使用rotate实现元素空间旋转效果
语法:
1,transform:rotateZ(值);
2,transform:rotateX(值);
3,transform:rotateY(值);
取值（正负均可）:像素单位数值 百分比
左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
拓展
1,rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
2,x，y，z取值为0-1之间的数字
立体呈现
目标：使用transform-style: preserve-3d呈现立体图形
实现方法
1,添加transform-style: preserve-3d;
2,使子元素处于真正的3d空间
呈现立体图形步骤
1.盒子父元素添加transform-style: preserve-3d；
2.按需求设置子盒子的位置（位移或旋转）
注:空间内，转换元素都有自已独立的坐标轴，互不干扰
空间缩放
目标：使用scale实现空间缩放效果
语法
1,transform: scaleX(倍数);
2,transform: scaleY(倍数);
3,transform: scaleZ(倍数);
4,transform: scale3d(x, y, z);
取值（正负均可）:像素单位数值 百分比
动画
目标：使用animation添加动画效果
动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧
动画的实现步骤
1.定义动画
@keyframes 动画名称 {
from{ }
to{ }
}
或者
@keyframes 动画名称 {
0%
50%
100%
}
2.调用动画
animation:动画名称 动画花费的时长;
注:1,动画的名称不能重复
2,可参与过渡的css样式都可以参与动画
3,动画的名称不能为running
4,如果调用该动画的盒子样式和初始化状态的样式可以省略不写
动画属性
目标：使用animation相关属性控制动画执行过程
animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
注意：
1, 动画名称和动画时长必须赋值
2, 取值不分先后顺序
3, 如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
逐帧动画:帧动画。开发中，一般配合精灵图实现动画效果.
animation-timing-function: steps(N)；
将动画过程等分成N份
