1.空间转换
transform属性
实现元素在空间内的位移、旋转、缩放等
空间：坐标轴定义，x、y和z三条坐标轴构成一个立体空间
Z轴位置与视线方向相同
空间转换也叫3D转换
属性：transform
语法： transform：translate3d（x,y,z）
transform:translateX(值)
transform:translateY(值)
transform:translateZ(值)
取值（正负均可）: 像素单位数值 百分比
perspective属性（添加给父级），透视效果
perspective：值;
- 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离
- perspective只是增加了近大远小的效果，并不是真正开启3d
rotate属性：实现元素空间旋转效果
语法：
transform：rotateZ（值）
transform：rotateX（值）
transform：rotateY（值）
空间旋转
rotate3d（x，y，z ，角度度数）：用来设置自定义旋转轴的位置和旋转角度 x，y，z 取值为0~1之间的数字
立体呈现
目标： 使用transform-style: preserve-3d呈现立体图形
思考：使用perspective透视属性能否呈现立体图形？
答：不能，perspective只增加近大远小、近实远虚的视觉效果。
实现方法
添加 transform-style: preserve-3d;
使子元素处于真正的3d空间
空间缩放
语法
- transform：scaleX（倍数）；
- transform：scaleY（倍数）；
- transform：scaleZ（倍数）；
- transform：scale3d（x,y,z）；
2.动画
动画注意点：
1.动画的名称不能为running，否则动画不生效；
2.多个动画之间动画的名称不能重复;
3.一次动画完成之后，默认会突然一下回到最初的状态
animation
过渡——实现2个状态间的变化过程
动画效果：实现多个状态间的变化过程，动画过程可控
（重复播放、最终画面、是否暂停） 动画实现步骤分3步 动画实现步骤——1.定义动画
动画实现步骤——2.使用动画
动画实现步骤——3. animation：紧跟着动画名称+动画时长\
动画属性
调用动画
延迟时间：动画开始执行之前要等待的时间 s/ms
动画播放次数：infinite 无限次播放
动画播放方向：alternate 交替播放
速度曲线：默认 ease； 1. linear 匀速播放，一般用在补间动画(连续的动画播放)
steps(次数)一般配合精灵图使用，用在逐帧动画，一步一步的去完成的动画；
执行完毕时的状态：forwards 动画会停在动画结束时的状态；
注意点：
动画名称和播放一次动画的时长必须写，其他属性需要就写
forwards不能和infinite结合使用，否则不生效
animation 里面属性值 不分先后顺序
当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间/延迟时间
使用steps实现逐帧动画
逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
语法： animation-timing-function: steps(N)；
将动画过程等分成N份
.box {
width: 140px;
height: 140px;
/* ps */
background: skyblue url(./images/bg.png);
/* 调用动画 */
animation: translate 3s forwards, move 1s steps(12) infinite;
}
/* 2个动画 */
/* 1.让盒子往右边平移 */
@keyframes translate {
to {
transform: translateX(600px);
}
}
/* 2.让人物在盒子里面跑起来 */
@keyframes move {
to {
/* 改变背景图片位置 */
background-position: -1680px 0;
}
}
