空间转换
目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。 空间转换也叫3D转换
属性：transform
透视
目标：使用perspective属性实现透视效果
属性（添加给父级）
perspective: 值;
取值：像素单位数值， 数值一般在800 – 1200。
作用：
空间转换时，为元素添加近大远小、近实远虚的视觉效果
空间旋转
目标：使用rotate实现元素空间旋转效果
transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
左手判断法：使用rotate实现元素空间旋转效果
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
立体呈现
目标： 使用transform-style: preserve-3d呈现立体图形
呈现立体图形步骤
1. 盒子父元素添加transform-style: preserve-3d；
2. 按需求设置子盒子的位置（位移或旋转）
注意：空间内，转换元素都有自已独立的坐标轴，互不干扰
空间缩放
目标：使用scale实现空间缩放效果
语法
transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);
动画的实现步骤及属性：
使用steps实现逐帧动画
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
animation-timing-function: steps(N)；
将动画过程等分成N份
精灵动画制作步骤
准备显示区域
设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
定义动画
改变背景图的位置（移动的距离就是精灵图的宽度）
使用动画
添加速度曲线steps(N)，N与精灵图上小图个数相同
添加无限重复效果
