空间转换（3D）
空间位移
-
围绕X轴
- transform:translateX()
- 从屏幕到人眼的轴线
-
围绕Y轴
- transform:translateY()
-
围绕z轴
- transform:translateZ()
透视
- 近大远小
- perspection:400px~1200px;
- 加到父元素身上
空间旋转
-
围绕X轴
- transform:rotateX(deg)
-
围绕Y轴
- transform:rotateY(deg)
-
围绕z轴
- transform:rotateZ(deg)
-
连写
- transform:rotate3d(deg)
子元素开启3D环境
- transform-style: preserve-3d;
开启上帝视角
- 让大家在写代码的过程中看到立体盒子
- transform: rotateX(-XXdeg) rotateY(XXdeg);
左手定则
- 左手大拇指指向轴线的正方形
- 四指弯曲的方向为旋转的方向
动画
定义动画
@keyframes 动画名称{form{}to{}}
-
@keyframes 动画名称{0%{}50%{}100%{}}
- 百分比指的是动画总时长的占比
调用动画
-
animation:动画名称（必写） 动画执行时间（必写） 动画延迟 速度曲线 播放次数 反向播放 停留结束位置；
-
动画连写属性没有顺序限制。 如果动画执行时间和延迟时间同时出现，写在前面的是动画执行时间，写在后面的是延迟时间。
-
速度曲线中的匀速：linear
-
反向播放动画： alternate
-
播放次数中的 无限次播放： infinite
-
动画停留在结束位置：forwards
-
暂停动画
- animation-play-state: paused;
- 一般配合:hover{}一起使用
- 默认值为running
-
逐帧动画
- steps(数字)
- 不能与linear一同出现
- 让一个动画分成几步执行
-
动画延迟
- animation-delay
- 单位s/ms
