移动web02
空间转换
transform
-
位移translate
- translateZ搭配透视
- transform: translateX()
- transform: translateY()
- transform: translate3d(x, y, z)
-
旋转rotate
-
rotateX
-
rotateY
-
rotateZ
-
自定义轴旋转rotate3d(0,0,0,deg)
-
左手法则
- 左手的大拇指指向轴线的正值方向，四指弯曲的方向即为正值旋转的方向
-
-
透视perspective
- 加在父级上 实现近大远小
-
立体呈现transform-style
- 在需要子元素呈现3d效果的父级身上
- preserve-3d开启3d环境
动画
定义动画
- @keyframce 动画名 0%{} 50%{} 100%{}
- @keyframce 动画名 from{} to{}
- 定义多个动画 @keyframce 动画名 0%{} 50%{} 100%{}
调用动画animation
动画名 动画持续时间 运动曲线 开始动画时间 次数 反向运动 运动后停留在原地
运动曲线
- 默认ease
- 匀速liner
- 步长steps()
运动次数
- 默认为1
- 循环infinite
反向运动alternate
运动后停留在原地
- forword
- 返回backword
animation-dalay动画持续时间
鼠标经过停止运动animation-play-state: paused;
\
