01-空间转换
1.translate实现元素空间位移效果
2.perspective属性实现透视效果
空间转换时,父元素添加了perspective属性,子元素才具有近大远小、近实远虚的视觉效果,取值范围: 400-1200px,模拟眼睛到屏幕的距离.
3.rotate实现元素空间旋转效果
拓展:rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度,x，y，z 取值为0-1之间的数字.
4.左手法则
transform:rotate(),判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向.
5.立体呈现
父元素添加transform-style: preserve-3d属性,使子元素处于真正的3d空间.
6.scale实现空间缩放效果
02-动画
动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停
动画的本质:快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧
1.动画实现步骤
1.定义动画
起始状态(from和0%)若和元素本身状态一致则可以省略from和0%,另起一个类定义动画.
2.使用动画
哪个类需要动画,则在类中添加animation属性.
3.animation复合属性
animation: move 4s linear 1s infinite alternate forwards;
forwards不能和infinite结合使用，否则forwards不生效
延迟时间：动画开始之前要等待的时间 s/ms
动画播放次数：infinite 无限次播放
动画播放方向：alternate 交替播放
速度曲线：默认 ease； 1. linear 匀速播放 2. steps(次数)一般配合精灵图使用
执行完毕时的状态：forwards 动画会停在动画结束时的状态；
注意点：
动画名称和播放一次动画的时长必须写，其他属性需要就写
animation 里面属性值 不分先后顺序
当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间
补间动画:动画执行过程中,没有间隔,使用的速度曲线为默认值ease
逐帧动画:一步一步执行的动画,中间有间隔,使用的速度曲线为steps(正整数) ,又叫精灵动画,因为逐帧动画常常配合精灵图使用
4.animation单一属性
暂停动画animation-play-state,一般配合hover使用
5.使用steps实现逐帧动画
animation-timing-function: steps(N),将动画过程等分成N份
准备显示区域-->设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
定义动画-->改变背景图的位置（移动的距离就是精灵图的宽度）
使用动画-->添加速度曲线steps(N)，N与精灵图上小图个数相同 ,添加无限重复效果
