【了解】3d变换
-
3d平移
-
transform: translateZ();
- Z轴 是从屏幕到人眼的轴线是Z轴的正方形，添加了透视之后才能看到元素在Z轴上的变化
-
transform: translate3d(x, y, z);
-
-
perspective
- 透视 视距 景深
- 400px - 1200px
- 加到父元素上的
- 让所有的子元素 有近大远小的效果
-
3d旋转
-
transform: rotateX(deg)
-
transform: rotateY(deg)
-
transform: rotateZ(deg)
- 等同于 transform: rotate(deg)
-
旋转之后坐标轴也会跟着一起旋转
-
左手定则
- 左手大拇指指向轴线的正方形 ，四指弯曲的方向为旋转的方向
-
动画
-
定义动画关键帧
- @keyframes 动画名称 { from {css样式} to {css样式} }
- @keyframes 动画名称 { 0% {css样式} 20% {css样式} 40% {css样式} 100% {css样式} }
-
调用动画
-
animation
-
动画名称
- 必写
-
单次动画执行时间
- 必写
- s
- ms
-
动画执行次数
-
可以写数字
-
infinite
- 无限次播放动画
-
-
是否反向播放
- alternate
-
速度曲线
-
默认 ease
-
linear
- 匀速
-
steps(数字)
- 逐帧动画 让一个动画分成几步执行
-
-
-
-
动画停留结束位置
- forwards
-
动画延迟
- s
- ms
-
暂停动画
-
animation-play-state
- 默认 running
- paused
-
一般配合:hover一起使用
-
\
