一??2D轉(zhuǎn)換

轉(zhuǎn)換是CSS3中具有顛覆性的特征之一，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放，甚至支持矩陣方式，配合即將學(xué)習(xí)的過(guò)渡和動(dòng)畫知識(shí)，可以取代大量之前只能靠Flash才可以實(shí)現(xiàn)的效果。

1、移動(dòng) translate(x, y) 可以改變?cè)氐奈恢?#xff0c;x、y可為負(fù)值；

2、縮放 scale(x, y) 可以對(duì)元素進(jìn)行水平和垂直方向的縮放，x、y的取值可為小數(shù)，不可為負(fù)值；

4、旋轉(zhuǎn) rotate(deg) 可以對(duì)元素進(jìn)行旋轉(zhuǎn)，正值為順時(shí)針，負(fù)值為逆時(shí)針；

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

二? 3D轉(zhuǎn)換

1、3D坐標(biāo)軸

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

? ? ? ? ? ? ? ? ? ? ? ?

2、左手坐標(biāo)系

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

?

3、左手法則

左手握住旋轉(zhuǎn)軸，豎起拇指指向旋轉(zhuǎn)軸正方向，正向就是其余手指卷曲的方向。

三?? 動(dòng)畫

動(dòng)畫是CSS3中具有顛覆性的特征之一，可通過(guò)設(shè)置多個(gè)節(jié)點(diǎn)來(lái)精確控制一個(gè)或一組動(dòng)畫，常用來(lái)實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果。

1、必要元素：

a、通過(guò)@keyframes指定動(dòng)畫序列；

b、通過(guò)百分比將動(dòng)畫序列分割成多個(gè)節(jié)點(diǎn)；

c、在各節(jié)點(diǎn)中分別定義各屬性

d、通過(guò)animation將動(dòng)畫應(yīng)用于相應(yīng)元素；

2、關(guān)鍵屬性

a、animation-name設(shè)置動(dòng)畫序列名稱

b、animation-duration動(dòng)畫持續(xù)時(shí)間

c、animation-delay動(dòng)畫延時(shí)時(shí)間

d、animation-timing-function動(dòng)畫執(zhí)行速度，linear、ease等

e、animation-play-state動(dòng)畫播放狀態(tài)，play、paused等

f、animation-direction動(dòng)畫逆播，alternate等

g、animation-fill-mode動(dòng)畫執(zhí)行完畢后狀態(tài)，forwards、backwards等

h、animation-iteration-count動(dòng)畫執(zhí)行次數(shù)，inifinate等

轉(zhuǎn)載于:https://www.cnblogs.com/lsy0403/p/5868429.html

總結(jié)

以上是生活随笔為你收集整理的CSS3中的2D和3D转换知识介绍的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。