3D變形能實(shí)現(xiàn)怎樣的效果？示例代碼演示變形操作

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

1. rotateX()

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

transform:rotateX(a);

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

2. rotateY()

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

transform:rotateY(a);

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

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

transform:rotateY(60deg);

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

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

注意：

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

3. rotated3d ()

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

rotate3d(x,y,z,angle);

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

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

4. perspective屬性

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

perspective:參數(shù)值;

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

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

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

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