过渡 transition(zoom不支持transition)
transition-property
指定可以过渡的属性,默认值为all:表示需要过渡的所有属性,可以指定具体属性
transition-duration
过渡完成需要的时间,单位是s(秒),是不能省略的属性
transition-timing-function
过渡的动画类型,默认值为ease,还有ease-in,ease-out,ease-in-out,linear,贝塞尔曲线cubic-bezier(), 帧step()
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轴发生倾斜