3D變形能實(shí)現(xiàn)怎樣的效果？3D變形介紹

2D變形是元素在X軸和Y軸的變化，而3D變形是元素圍繞X軸、Y軸、Z軸的變化。相比于平面化2D變形，3D變形更注重于空間位置的變化。下面將對(duì)網(wǎng)頁(yè)中一些常用的3D變形效果做具體介紹。

1. rotateX()

在CSS3中，rotateX()可以讓指定元素圍繞X軸旋轉(zhuǎn)，基本語(yǔ)法格式如下：

transform:rotateX(a);

在上述語(yǔ)法格式中，參數(shù)a用于定義旋轉(zhuǎn)的角度值，單位為deg，取值可以是正數(shù)也可以是負(fù)數(shù)。如果值為正，元素將圍繞X軸順時(shí)針旋轉(zhuǎn)；如果值為負(fù)，元素圍繞X軸逆時(shí)針旋轉(zhuǎn)。

2. rotateY()

在CSS3中，rotateY()可以讓指定元素圍繞Y軸旋轉(zhuǎn)，基本語(yǔ)法格式如下：

transform:rotateY(a);

在上述語(yǔ)法中，參數(shù)a與rotateX(a)中的a含義相同，用于定義旋轉(zhuǎn)的角度。如果值為正，元素圍繞Y軸順時(shí)針旋轉(zhuǎn)；如果值為負(fù)，元素圍繞Y軸逆時(shí)針旋轉(zhuǎn)。

例如，下面的實(shí)例代碼。

transform:rotateY(60deg);

此時(shí)，刷新瀏覽器頁(yè)面，元素將圍繞Y軸順時(shí)針旋轉(zhuǎn)60度，效果如圖1所示。

圖1 元素圍繞Y軸順時(shí)針旋轉(zhuǎn)

注意：

rotateZ()函數(shù)和rotateX()函數(shù)、rotateY()函數(shù)功能一樣，區(qū)別在于rotateZ()函數(shù)用于指定一個(gè)元素圍繞Z軸旋轉(zhuǎn)。如果僅從視覺(jué)角度上看，rotateZ()函數(shù)讓元素順時(shí)針或逆時(shí)針旋轉(zhuǎn)，與2D中的rotate()效果等同，但rotateZ不是在2D平面上的旋轉(zhuǎn)。

3. rotated3d ()

rotated3d()是通過(guò)rotateX()、rotateY()和rotateZ()演變的綜合屬性，用于設(shè)置多個(gè)軸的3D旋轉(zhuǎn)，例如要同時(shí)設(shè)置X軸和Y軸的旋轉(zhuǎn)，就可以使用rotated3d ()，其基本語(yǔ)法格式如下：

rotate3d(x,y,z,angle);

在上述語(yǔ)法格式中，x、y、z可以取值0或1，當(dāng)要沿著某一軸轉(zhuǎn)動(dòng)，就將該軸的值設(shè)置為1，否則設(shè)置為0。Angle為要旋轉(zhuǎn)的角度。例如設(shè)置元素在X軸和Y軸均旋轉(zhuǎn)45度，可以書(shū)寫(xiě)下面的示例代碼

transform:rotate3d(1,1,0,45deg);

4. perspective屬性

perspective屬性可以簡(jiǎn)單的理解為視距，主要用于呈現(xiàn)良好的3D透視效果。例如我們前面設(shè)置的3D旋轉(zhuǎn)果并不明顯，就是沒(méi)有設(shè)置perspective的原因。perspective屬性的基本語(yǔ)法格式如下。

perspective:參數(shù)值;

在上面的語(yǔ)法格式中，perspective屬性參數(shù)值可以為none或者數(shù)值（一般為像素），其透視效果由參數(shù)值決定，參數(shù)值越小，透視效果越突出。

值得一提的是，在CSS3中還包含很多轉(zhuǎn)換的屬性，通過(guò)這些屬性可以設(shè)置不同的轉(zhuǎn)換效果，表1列舉了一些常見(jiàn)的屬性。

表1 轉(zhuǎn)換的屬性

除了前面提到的旋轉(zhuǎn)，3D變形還包括移動(dòng)和縮放，運(yùn)用這些方法可以實(shí)現(xiàn)不同的轉(zhuǎn)換效果，具體方法如表2所示。
表2 轉(zhuǎn)換的方法

CSS3的三種屬性選擇器介紹

HTML5文檔頭部相關(guān)標(biāo)簽怎樣使用？

CSS滑動(dòng)門(mén)是什么？有什么用處？[web前端培訓(xùn)]

傳智教育web前端課程