CSS3中的2D和3D轉換知識介紹


一  2D轉換

轉換是CSS3中具有顛覆性的特征之一,可以實現元素的位移、旋轉、變形、縮放,甚至支持矩陣方式,配合即將學習的過渡和動畫知識,可以取代大量之前只能靠Flash才可以實現的效果。

1、移動 translate(x, y) 可以改變元素的位置,x、y可為負值;

2、縮放 scale(x, y) 可以對元素進行水平和垂直方向的縮放,x、y的取值可為小數,不可為負值;

4、旋轉 rotate(deg) 可以對元素進行旋轉,正值為順時針,負值為逆時針;

5、傾斜 skew(deg, deg) 可以使元素按一定的角度進行傾斜

二  3D轉換

1、3D坐標軸

用X、Y、Z分別表示空間的3個維度,三條軸互相垂直。如下圖

                       

2、左手坐標系

伸出左手,讓拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。這樣我們就建立了一個左手坐標系,拇指、食指和中指分別代表X、Y、Z軸的正方向。如下圖

 

3、左手法則

左手握住旋轉軸,豎起拇指指向旋轉軸正方向,正向就是其余手指卷曲的方向。

三   動畫

動畫是CSS3中具有顛覆性的特征之一,可通過設置多個節點來精確控制一個或一組動畫,常用來實現復雜的動畫效果。

1、必要元素:

a、通過@keyframes指定動畫序列;

b、通過百分比將動畫序列分割成多個節點;

c、在各節點中分別定義各屬性

d、通過animation將動畫應用於相應元素;

2、關鍵屬性

a、animation-name設置動畫序列名稱

b、animation-duration動畫持續時間

c、animation-delay動畫延時時間

d、animation-timing-function動畫執行速度,linear、ease等

e、animation-play-state動畫播放狀態,play、paused等

f、animation-direction動畫逆播,alternate等

g、animation-fill-mode動畫執行完畢后狀態,forwards、backwards等

h、animation-iteration-count動畫執行次數,inifinate等

打賞

免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2022 CODEPRJ.COM