过渡、2D 变形

---

过渡 transition（zoom不支持transition）

transition-property 指定可以过渡的属性，默认值为all:表示需要过渡的所有属性，可以指定具体属性
transition-duration 过渡完成需要的时间，单位是s(秒)，是不能省略的属性
transition-timing-function 过渡的动画类型，默认值为ease，还有ease-in，ease-out，ease-in-out，linear，贝塞尔曲线cubic-bezier(), 帧step()

image.png

transition-delay 延迟执行过渡的时间，单位是秒，默认值为0是；

2D变形 transform

translate

transform: translateX()在X轴上偏移的距离
transform: translateY()在Y轴上偏移的距离
transform: translate() 一个值，默认X轴上的偏移量
transform: translate(x, y)两个值，在X轴和Y轴上的偏移量

scale

transform: scaleX() X轴上的缩放比例
transform: scaleY() Y轴上的缩放比例
transform: scale() 整体的缩放比例 可以设置负数
使用场景：设置小于12px的字体

rotate

transform: rotate() 2D旋转，绕中心点旋转，正数时顺时针旋转，负数时逆时针旋转。

transform-origin 变形的参照点的位置，一个值默认X轴方向的参照点，两个值X轴和Y轴方向上的参照点。

skew

transform: skewX() 绕Y轴发生倾斜
transform: skewY() 绕X轴发生倾斜
transform: skew(x, y) 绕X轴和Y轴发生倾斜