教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

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

更新時間:2021年07月29日15時47分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓

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

1. rotateX()

在CSS3中,rotateX()可以讓指定元素圍繞X軸旋轉,基本語法格式如下:

transform:rotateX(a);

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

2. rotateY()

在CSS3中,rotateY()可以讓指定元素圍繞Y軸旋轉,基本語法格式如下:

transform:rotateY(a);

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

例如,下面的實例代碼。

transform:rotateY(60deg);

此時,刷新瀏覽器頁面,元素將圍繞Y軸順時針旋轉60度,效果如圖1所示。

3d變形

圖1 元素圍繞Y軸順時針旋轉

注意:

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

3. rotated3d ()

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

rotate3d(x,y,z,angle);

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

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

4. perspective屬性

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

perspective:參數(shù)值;

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

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

表1 轉換的屬性

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

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

方法名稱 描述
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 軸的值                                                              





猜你喜歡:

CSS3的三種屬性選擇器介紹

HTML5文檔頭部相關標簽怎樣使用?

CSS滑動門是什么?有什么用處?[web前端培訓]

傳智教育web前端課程





0 分享到:
和我們在線交談!