移动web第二天
空间转换
transform：translateZ(100px);
transform：translate3d(100px);相当于transform:translateX(100px) translateY(100px) translateZ(100px)
perspective透视属性值设置800-1200px
空间旋转
rotate：实现空间旋转效果
transform：rotateX();
transform：rotateY();
transform：rotateZ();
开启3d空间
transform-style:preserve-3d;
缩放
scaleX：缩放宽度
scaleY：缩放高度
scaleZ：缩放厚度
scale3d(x,y z);
动画
使用animation添加动画效果
构成动画的最小单元：帧或者动画帧
1.定义动画
2.使用动画
动画属性
animation-name:动画名称
animation-duration：动画时长
animation-delay：延迟时间
animation-fill-mode：动画执行完毕时的状态
- forwards：最后一帧状态
- backwards：第一帧状态
anmiation-timing-function：linear(匀速) 速度曲线 steps(数字)：逐帧动画
- 父元素多宽 设置位移多宽
- 想要分几步 写几
- 不要写上 forwards
- 加上无限播放
anmiation-iteration-count：重复次数 infinite为无限循环
anmiation-direction：动画执行方向 alternate为反向
animation-play-state：暂停动画 paused为暂停，通常配合**：hover**使用 running 播放
倍图
