過渡 transition(zoom不支持transition)
transition-property
指定可以過渡的屬性肺稀,默認(rèn)值為all:表示需要過渡的所有屬性挽拔,可以指定具體屬性
transition-duration
過渡完成需要的時間,單位是s(秒)克握,是不能省略的屬性
transition-timing-function
過渡的動畫類型蕾管,默認(rèn)值為ease,還有ease-in菩暗,ease-out掰曾,ease-in-out,linear停团,貝塞爾曲線cubic-bezier(), 幀step()
transition-delay
延遲執(zhí)行過渡的時間旷坦,單位是秒,默認(rèn)值為0是佑稠;
2D變形 transform
translate
transform: translateX()
在X軸上偏移的距離
transform: translateY()
在Y軸上偏移的距離
transform: translate()
一個值秒梅,默認(rèn)X軸上的偏移量
transform: translate(x, y)
兩個值,在X軸和Y軸上的偏移量
scale
transform: scaleX()
X軸上的縮放比例
transform: scaleY()
Y軸上的縮放比例
transform: scale()
整體的縮放比例 可以設(shè)置負(fù)數(shù)
使用場景:設(shè)置小于12px的字體
rotate
transform: rotate()
2D旋轉(zhuǎn)舌胶,繞中心點旋轉(zhuǎn)捆蜀,正數(shù)時順時針旋轉(zhuǎn),負(fù)數(shù)時逆時針旋轉(zhuǎn)辆琅。
transform-origin 變形的參照點的位置漱办,一個值默認(rèn)X軸方向的參照點,兩個值X軸和Y軸方向上的參照點婉烟。
skew
transform: skewX()
繞Y軸發(fā)生傾斜
transform: skewY()
繞X軸發(fā)生傾斜
transform: skew(x, y)
繞X軸和Y軸發(fā)生傾斜