首頁技術(shù)文章正文

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

更新時(shí)間:2021-07-29 來源:黑馬程序員 瀏覽量:

IT培訓(xù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所示。

3D變形

圖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)動(dòng),就將該軸的值設(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)換的屬性

屬性名稱描述屬性值
transform-style用于保存元素的3D 空間flat:子元素將不保留其 3D 位置。(默認(rèn)屬性)
preserve-3d子元素將保留其 3D 位置。
backface-visibility定義元素在不面對屏幕時(shí)是否可見visible:背面是可見的。
hidden:背面是不可見的。

除了前面提到的旋轉(zhuǎn),3D變形還包括移動(dòng)和縮放,運(yùn)用這些方法可以實(shí)現(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 縮放,通過給定一個(gè) X 軸的值
scaleY(y)定義 3D 縮放,通過給定一個(gè) Y 軸的值
scaleZ(z)定義 3D 縮放,通過給定一個(gè) Z 軸的值                                                              









猜你喜歡:

什么是CSS?CSS的發(fā)展和版本迭代介紹

黑馬程序員web前端視頻教程:HTML5+CSS3教程下載

什么是less?如何通過Less變量來實(shí)現(xiàn)CSS樣式?

黑馬程序員前端開發(fā)培訓(xùn)

分享到:
在線咨詢 我要報(bào)名
和我們在線交談!