更新時間:2021-07-29 來源:黑馬程序員 瀏覽量:
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ù)也可以是負數(shù)。如果值為正,元素將圍繞X軸順時針旋轉(zhuǎn);如果值為負,元素圍繞X軸逆時針旋轉(zhuǎn)。
2. rotateY()
在CSS3中,rotateY()可以讓指定元素圍繞Y軸旋轉(zhuǎn),基本語法格式如下:
transform:rotateY(a);
在上述語法中,參數(shù)a與rotateX(a)中的a含義相同,用于定義旋轉(zhuǎn)的角度。如果值為正,元素圍繞Y軸順時針旋轉(zhuǎn);如果值為負,元素圍繞Y軸逆時針旋轉(zhuǎn)。
例如,下面的實例代碼。
transform:rotateY(60deg);
此時,刷新瀏覽器頁面,元素將圍繞Y軸順時針旋轉(zhuǎn)60度,效果如圖1所示。
圖1 元素圍繞Y軸順時針旋轉(zhuǎn)
注意:
rotateZ()函數(shù)和rotateX()函數(shù)、rotateY()函數(shù)功能一樣,區(qū)別在于rotateZ()函數(shù)用于指定一個元素圍繞Z軸旋轉(zhuǎn)。如果僅從視覺角度上看,rotateZ()函數(shù)讓元素順時針或逆時針旋轉(zhuǎn),與2D中的rotate()效果等同,但rotateZ不是在2D平面上的旋轉(zhuǎn)。
3. rotated3d ()
rotated3d()是通過rotateX()、rotateY()和rotateZ()演變的綜合屬性,用于設置多個軸的3D旋轉(zhuǎn),例如要同時設置X軸和Y軸的旋轉(zhuǎn),就可以使用rotated3d (),其基本語法格式如下:
rotate3d(x,y,z,angle);
在上述語法格式中,x、y、z可以取值0或1,當要沿著某一軸轉(zhuǎn)動,就將該軸的值設置為1,否則設置為0。Angle為要旋轉(zhuǎn)的角度。例如設置元素在X軸和Y軸均旋轉(zhuǎn)45度,可以書寫下面的示例代碼
transform:rotate3d(1,1,0,45deg);
4. perspective屬性
perspective屬性可以簡單的理解為視距,主要用于呈現(xiàn)良好的3D透視效果。例如我們前面設置的3D旋轉(zhuǎn)果并不明顯,就是沒有設置perspective的原因。perspective屬性的基本語法格式如下。
perspective:參數(shù)值;
在上面的語法格式中,perspective屬性參數(shù)值可以為none或者數(shù)值(一般為像素),其透視效果由參數(shù)值決定,參數(shù)值越小,透視效果越突出。
值得一提的是,在CSS3中還包含很多轉(zhuǎn)換的屬性,通過這些屬性可以設置不同的轉(zhuǎn)換效果,表1列舉了一些常見的屬性。
表1 轉(zhuǎn)換的屬性
屬性名稱 | 描述 | 屬性值 |
---|---|---|
transform-style | 用于保存元素的3D 空間 | flat:子元素將不保留其 3D 位置。(默認屬性) |
preserve-3d子元素將保留其 3D 位置。 | ||
backface-visibility | 定義元素在不面對屏幕時是否可見 | visible:背面是可見的。 |
hidden:背面是不可見的。 |
除了前面提到的旋轉(zhuǎn),3D變形還包括移動和縮放,運用這些方法可以實現(xiàn)不同的轉(zhuǎn)換效果,具體方法如表2所示。
表2 轉(zhuǎn)換的方法
方法名稱 | 描述 |
---|---|
translate3d(x,y,z) | 定義3D位移 |
translateX(x) | 定義3D位移,僅使用用于 X 軸的值 |
translateY(y) | 定義3D位移,僅使用用于 Y 軸的值 |
translateZ(z) | 定義3D位移,僅使用用于Z 軸的值 |
scale3d(x,y,z) | 定義 3D 縮放 |
scaleX(x) | 定義 3D 縮放,通過給定一個 X 軸的值 |
scaleY(y) | 定義 3D 縮放,通過給定一個 Y 軸的值 |
scaleZ(z) | 定義 3D 縮放,通過給定一個 Z 軸的值 |