移动web第二天
空间转换
位移
- transform:translateX() 设置x y z 是往当前轴移动
- transform:translate3d(x,y,z) 要开启3d环境才有效
透视，景深，视距
perspective 600px--1200px
给父元素添加 实现近大远小效果，但是只是显示效果没有开启3D
旋转
transform:rotate()
- 左手定则
3D呈现
transform-style
-
flat
- 默认值，平面
-
preserve-3d 开启3d环境
动画
定义动画
- @keyframes 动画名称{from{} to{} }
- @keyframes 动画名称{0%{} 50%{} 100%{}}
调用动画
- animation: 动画名称 动画执行时间 次数 速度曲线 延迟时间 反向播放 停留结束位置
- 次数 infinite
- 反向播放 alternate
- 停留在结束位置 forwards
- 暂停动画 animation-play-state:paused
- 动画延迟 animation-delay
