3d转换
空间坐标系
- Z轴屏幕到人眼得方向是正方向
3d平移
- transform：translate Z（）
- transform：translate3d（x，y，z）
景深、透视、视距
- perspective
- 300px-1200px
- 安排一只眼睛帮我们观测页面中的元素在z轴上的变化
3d旋转
-
transform：rotateZ（deg）=transform：rotate（deg）
-
transform：rotateX（）
- 体操
-
transform：rotateY（）
- 钢管舞
-
左手定则：左手大拇指指向轴线的正方向，四指弯曲的方向为旋转的方向
了解
- 自定义轴旋转
- transform：rotate3d（x，y，z，deg）
- xyz决定轴线的方向
3d呈现
-
transform-style
- preserve-3d
动画
定义动画
- @keyframes动画名{ from{} to{} }
- @keyframes动画名{ 0%{} 100%{} }
调用动画
-
动画名称
- 必写
-
单次动画执行时间
- 必写
- s ms
-
执行次数
- infin无限次
- 也可以写具体的数
-
是否反向播放
- alternate
- 注意：反向播放也会占用一次执行次数
-
延迟
- animation-delay
- s ms
-
速度曲线
-
linear
- 匀速
-
steps（次数）
- 逐帧动画
-
-
结束时停留的位置
- forwards
- 停留在结束位置
-
配合hover一起使用的暂停动画
- animation-play-state：paused；
