鬼谷網頁設計

用CSS使物件動畫的效果

回列表icon

回列表

網頁設計transform

此篇會介紹如何用CSS來讓物件做些簡單的2D動作

語法:
transform:(動作的函數)
函數的括號內必須要有單位,通常會用的是deg(角度)和(%數),這2個比較常使用。

函數介紹:
rotate(10deg)
以指定元素為參考點,旋轉10度
skewX(10deg)
以指定元素為參考點,沿著橫向傾斜10度
skewY(10deg)
以指定元素為參考點,沿著縱向傾斜10度
skew(10deg,20deg)
以指定元素為參考點,橫向傾斜10度、縱向傾斜20度。參數如果只指定一個,則另一個會自動回0,也就是只會橫向傾斜
scaleX(1.1)
指定的元素橫向放大1.1倍,如果設定為0.9,則是橫向縮小0.9倍
scaleY(1.1)
指定的元素縱向放大1.1倍,如果設定為0.9,則是縱向縮小0.9倍
scale(1.1,0.9)
指定元素橫向放大1.1倍,縱向縮小0.9倍。如果只指定一個,則會自動跟第一個數據一樣,等於是等比例縮放
translateX(10px)
指定元素橫向移動10px的距離尺寸
translateY(10px)
指定元素縱向移動10px的距離
translate(p,p)
指定元素橫向移動10px,縱向移動10px,結合X和Y軸的部分。如果只指定一個,另一個則自動為0,就是只會橫向移動


也可以多個函數一起使用
transform: rotate(20deg) translate(20px) scale(0.8);
指定的元素旋轉20度,橫向移動20px,縮小0.8倍

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

參考範例網站←

上一篇 上一篇 下一篇 下一篇