一. transform(空间转化)
使用transform属性实现元素在空间内的位移、旋转、缩放等效果
-
平移
transform:translateZ() : 可以实现z轴方向的位置偏移(z轴是指垂直屏幕向外的轴)
transform:translate3d(x,y,z)
-
旋转
transform:rotateZ() : 平面旋转就是围绕Z轴旋转
transform:rotateX()
transform:rotateY()
transform:rotate3d(x,y,z,deg) : x,y,z的作用是描述一个方向，一个向量
-
缩放
scale3d()
-
透视（视距）
使用perspective属性实现透视效果（添加给父级
取值：像素单位数值， 数值一般在800 – 1200。
就是指人眼观察物体的距离
-
3d呈现
transform-style:preserve-3d 作用：默认情况下，子元素的3d效果并不会保留下来，如果需要保留，需要在父容器中设置这个样式
-
空间旋转
使用rotate实现元素空间旋转效果
rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度 x，y，z 取值为0-1之间的数字
-
左手定则
大拇指沿着轴的正方向，手指环绕方向就是正值
二. transition(过渡)
- 作用：让元素的样式慢慢的变化，常配合hover使用，增强网页交互体验
- 属性名：transition
- 常见取值：
| 参数 | 取值 |
|---|---|
| 过渡的属性 | all: 所有能过渡的属性都是过渡, 具体属性名如: with: 只有width有过渡 |
| 过渡的时长 | 数字 + s (秒) |
- 过渡需要：默认状态 和 hover状态样式不同，才能有过渡效果
- transition属性给需要过渡的元素本身加
- transition属性设置在不同状态中，效果不同的 ① 给默认状态设置，鼠标移入移出都有过渡效果 ② 给hover状态设置，鼠标移入有过渡效果，移出没有过渡效果
三. animatiion(动画)
定义动画
@keyframes { /* name指动画名称 */
form{} /* 初始状态，如果和盒子状态相同可省略 0%{} */
to{} /* 结束状态 100%{} */
}
调用动画
animation:动画名称 动画持续时间 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
速度曲线：linear 匀速 补间动画 速度曲线：steps(数值) 逐帧动画 重复次数：infinite 无限播放 动画方向：alternate 交替播放 执行完毕时状态：forwards 停止在结束状态，不能和infinite结合使用，否则失效
animation-name:动画名称，必须 animation-duration:动画时长，必须 animation-timing-function:速率曲线： linear匀速 animation-interation-count:动画次数，infinite
