一、空间转换
1.空间位移translateZ()
1.1 Z代表的是Z轴，也就是屏幕到眼睛的方向，可取正负数
1.2 值越大，也就代表元素跟我们之间越近，元素也就会越大，反之取反，但由于网页默认是2d，所以看不到效果，需要配合perspective:1200px透视属性来实现效果
1.3 位移3D连写：transfrom: translate3d(x,y,z);
2.透视/视距perspective
2.1 用来配合3d元素实现效果，取值一般在800-1200px最合适
2.2 子元素有3d属性，就给父元素添加perspective:1200px
3.空间旋转rotate
3.1 rotateX()沿X轴旋转
3.2 rotateY()沿Y轴旋转
3.3 rotateZ()沿Z轴旋转
左手法则
左手握拳，大拇指跟x轴的正方向一致，4指握拳的方向就是x轴的正旋转方向，反向为负旋转方向
4.在立体空间中呈现图形-主要是控制子元素是否开启三维立体环境
4.1 给父元素添加transform-style: presever-3d;
4.2 然后按需求给子元素设置位置、旋转
4.3 transform-style: flat是不开启子元素的3d立体空间
注意：在立体空间中，一点和一线是不占位置的，所以即便90度旋转，也是看不见的
二、动画
1.定义动画
/* 定义动画写在style里面 */
@keyframes 动画名字 {
from { width: 200px } /* from也就是初始状态，从什么什么开始，这里填写可以过渡的大部分css属性 */
to { width: 400px } /* to是结束状态 */
}
2.使用动画
/* 谁要动画就在哪个元素里面添加animation */
.box {
/* animation: 动画名字 动画时长/s 速度曲线 延迟播放/s 播放次数 动画方向 执行完毕状态 */
animation: change 2s linear 2s infinite alternate forwards;
}
animation-name动画名称：各个动画名称不能一样，并且名字不能是关键字
animation-duration动画时长：秒为单位，如果一个动画里面有个两个时长，则前面为动画时长，后面为延迟播放时间
animation-timing-function速度曲线：ease默认值，先快，中间慢，后面块的速度；linear匀速；teps()逐帧
animation-delay延迟播放：秒为单位
animaiton-iteration-count播放次数：正整数，infinite无限循环
animaition-decoration动画方向：alternate反向动画
animation-fill-mode执行完毕状态：backwards执行完毕之后保持第一帧状态，默认值；forwards执行完毕之后保持最后一帧状态
animation-play-state暂停动画，一般配合hover使用，谁在调用动画，就给谁添加
3.逐帧动画
就是通过精灵图做背景，然后逐帧的移动精灵图来实现一个动画效果
所以可以通过设置速度曲线的teps值来实现
步骤：
1.首先将精灵图分成宽度都相等的N分，并且盒子的尺寸也就是一张小图的尺寸
2.定义动画，就是移动精灵图的背景位置
3.使用动画
animation: move 2s teps(N) infinite
4.多动画调用
当调用多个动画时，需要用逗号隔开来实现连写
animation: run 0.7s infinite steps(12), move 4s linear forwards;
