一、空间转换
（1）概念：
transform属性实现元素在空间内的位移、旋转、缩放等效果
1、空间：x、y、z和三条坐标轴构成了一个立体空间。z轴位置与视线方向相同。
2、空间转换也叫3D转换
3、属性：transform
（2）语法：
1、transform: translate3d(x, y, z);
2、transform: translateX(值);
3、transform: translateY(值);
4、transform: translateZ(值);
取值（正负均可）
1、像素单位数值
2、百分比
二、透视---perspective（pp）
语法：perspective: 值;
（1）属性（添加给父级）
取值：像素单位数值，一般在800~1200
（2）作用
1、空间转换时，为元素添加近大远小、近实远虚的视觉效果.
2、透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。
（3）注意
添加视距，只是增加了一个进大远小的效果，并没有真正开启3d模式
三、空间旋转
使用rotate实现元素空间旋转效果
（1）语法
1、transform: rotateZ(值);
2、transform: rotateX(值);
3、transform: rotateY(值);
4、transform：ratate3d（x, y, z, 角度度数）
（2）左手法则
左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向。（适用于x、y、z轴）
（1）x轴方向上： 正方向：向下进入屏幕
（2）y轴方向上：正方向：向左进入屏幕
（3）z轴方向上：正方向：向右旋转--顺时针
四、立体呈现
使用transform-style: preserve-3d呈现立体图形（父盒子添加）
特性：使子元素处于真正的3d空间
五、空间缩放
使用scale实现空间缩放效果
语法：
1、 transform: scaleX(倍数);
2、transform: scaleY(倍数);
3、transform: scaleZ(倍数);
4、transform: scale3d(x, y, z);
六、动画
1、使用animation添加动画效果
2、动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
A1、实现步骤：
（1）定义动画：
方法一：
方法二： 百分比定义，可以让动画拥有多个状态，百分比指的是动画执行过程中的某一点百分比。（阶段性）
A2、动画注意点：
1.动画的名称不能重复
2.可参与过渡的css属性都可以参与动画
3.动画的名称不能为 running 它是关键词
4.如果调用该动画的盒子样式和初始状态的样式是一样的，初始状态可以省略不写
（2）使用动画
animation：动画名称 动画花费时长；
B、复合写法
1、动画名称和动画时长必须赋值
2、取值不分先后顺序
3、如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间
4、forwards不能和infinite结合使用，否则不生效
C、动画属性
七、总结
1、可参与过渡的都可以参与动画
2、一个盒子是平面的，没有厚度，故没有z轴缩放
3、透视和3d都是加给父盒子的
