空间转换
使用transform属性实现元素在空间内的位移、旋转、缩放等效果
空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同
空间位移
语法
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
透视
目标：使用perspective属性实现透视效果达到近大远小、近清楚远模糊的效果
使用perspective属性实现透视效果一般给父元素添加，取值为800-1200之间。透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离
空间旋转
使用rotate实现空间旋转效果
使用语法
transform: rotateZ(值外正内负);
transform: rotateX(值左负右正);
transform: rotateY(值上负下正)
rotate3d(x, y, z, 角度度数deg) ：用来设置自定义旋转轴的位置及旋转的角度
左手法则
判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向
立体呈现
目标 使用transform-style: preserve-3d呈现立体图形给（父元素添加）2按需求设置子盒子的位置（位移或旋转）3使用perspective透视属性使子元素处于真正的3d空间
空间缩放
语法：transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z)
使用animation添加动画效果
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。animation-timing-function: steps(N)添加速度曲线steps(N)，N与精灵图上小图个数相同。 改变背景图的位置（移动的距离就是精灵图的宽度）
使用动画注意点：
1.名称不能重复，
2.可参与过度的css属性都可以参与动画
3.动画名称不能用running为名称 */
2.调用动画 第一个参数是你定义的动画名称,第二个参数是动画时长
一. 定义动画：让宽度从200变大到600 */
@keyframes change {
from {
width: 200px;
}
to {
width: 600px;
}
}
/* 1.定义动画 百分比可以实现阶段性的动画 */
@keyframes move {
0% {
width: 200px;
height: 100;
}
50% {
width: 500px;
height: 300px;
}
100% {
width: 800px;
height: 500px;
}
}
2.调用动画
延迟时间：动画开始之间要等待的时间 s/ms
动画播放次数：infinite 无限次播放
动画播放方向：alternate 交替播放
速度曲线：默认 ease； 1. linear 匀速播放 2. steps(次数)一般配合精灵图使用
执行完毕时的状态：forwards 动画会停在动画结束时的状态；
注意点：
动画名称和播放一次动画的时长必须写，其他属性需要就写
forwards不能和infinite结合使用，否则不生效
animation 里面属性值 不分先后顺序
当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间
animation-name: move;
补间动画没有间隔非常平滑
逐帧动画一步一步去执行动画会有间隔steps
逐帧动画又叫1精灵动画常常配合精灵图使用
