iT邦幫忙

1

鼠年全馬鐵人挑戰 WEEK 17: CSS transform

transform:(動作的函數),通常會配合animation:hover來做些動畫效果

範例

transform-origin:x y;

指定動作的參考點座標(中心軸),x y可以使用方未來指定
left、right、center、top、bottom,直接指定要在哪邊開始

rotate(20deg)

以指定元素為參考點,旋轉20度

skewX(20deg)

以指定元素為參考點,沿著橫向傾斜20度

skewY(20deg)

以指定元素為參考點,沿著縱向傾斜20度

skew(20deg,45deg)

以指定元素為參考點,橫向傾斜20度、縱向傾斜45度。參數如果只指定一個,則另一個會自動回0,也就是只會橫向傾斜

scaleX(1.2)

指定的元素橫向放大1.2倍,如果設定為0.9,則是橫向縮小0.9倍

scaleY(1.2)

指定的元素縱向放大1.2倍,如果設定為0.9,則是縱向縮小0.9倍

scale(1.2,0.9)

指定元素橫向放大1.2倍,縱向縮小0.9倍。如果只指定一個,則會自動跟第一個數據一樣,等於是等比例縮放

translateX(10px)

指定元素橫向移動10px的距離尺寸

translateY(10px)

指定元素縱向移動10px的距離

translate(p,p)

指定元素橫向移動10px,縱向移動10px,結合X和Y軸的部分。如果只指定一個,另一個則自動為0,就是只會橫向移動


尚未有邦友留言

立即登入留言