CSS變形transform(3d)的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)CSS變形transform(3d)的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

坐標(biāo)軸

在了解透視之前，首先要先了解坐標(biāo)軸。3D變形與2D變形最大的不同就在于其參考的坐標(biāo)軸不同。2D變形的坐標(biāo)軸是平面的，只存在x軸和y軸，而3D變形的坐標(biāo)軸則是x、y、z三條軸組成的立體空間，x軸正向、y軸正向、z軸正向分別朝向右、下和屏幕外

透視

透視是transform變形3D中最重要的內(nèi)容。如果不設(shè)置透視，元素的3D變形效果將無(wú)法實(shí)現(xiàn)。

//下面以rotateX()旋轉(zhuǎn)函數(shù)為例，rotateX(45deg)表示元素以X軸方向?yàn)檩S沿順時(shí)針旋轉(zhuǎn)45角度//左圖是無(wú)變形和透視樣式的原始效果，中圖是設(shè)置變形和透視樣式的效果，右圖是設(shè)置變形但未設(shè)置透視樣式的效果

由以上三個(gè)圖可說(shuō)明，如果不設(shè)置透視，那么瀏覽器會(huì)將元素的3D變形操作投射垂直到2D視平面上，最終呈現(xiàn)出來(lái)的只是元素的寬高變化

要深入了解透視，需要了解觀察者、被透視元素和變形元素這幾個(gè)概念。

首先變形元素，顧名思義，就是進(jìn)行transform3D變形的元素，主要進(jìn)行transform、transform-origin、backface-visibility等屬性的設(shè)置。

觀察者是瀏覽器模擬出來(lái)的用來(lái)觀察被透視元素的一個(gè)沒(méi)有尺寸的點(diǎn)，觀察者發(fā)出視線，類似于一個(gè)點(diǎn)光源發(fā)出光線。

被透視元素也就是被觀察者觀察的元素，根據(jù)屬性設(shè)置的不同，它有可能是變形元素本身，也可能是它的父級(jí)或祖先其元素(后面會(huì)詳細(xì)介紹)，主要進(jìn)行perspective、perspective-origin等屬性的設(shè)置

透視距離

透視距離perspective是指觀察者沿著平行于z軸的視線與屏幕之間的距離，簡(jiǎn)稱視距

值: none | <length>

初始值: none

應(yīng)用于: 非inline元素(包括block、inline-block、table、table-cell等)

繼承性: 無(wú)

[注意]透視perspective不可為0和負(fù)數(shù)，因?yàn)橛^察者與屏幕距離為0時(shí)或者在屏幕背面時(shí)是不可以觀察到被透視元素的正面的

[注意]透視perspective不可取百分比，因?yàn)榘俜直刃枰鄬?duì)的元素，但z軸并沒(méi)有可相對(duì)的元素尺寸

【1】一般地，物體離得越遠(yuǎn)，顯得越小。反映在perspective屬性上，就是該屬性值越大，元素的3d效果越不明顯。(就像離一個(gè)人很近，甚至可以看到他的毛孔；如果離一個(gè)人很遠(yuǎn)，可能只看到一個(gè)輪廓)

【2】設(shè)置透視perspective屬性的元素就是被透視元素。一般地，該屬性只能設(shè)置在變形元素的父級(jí)或祖先級(jí)。因?yàn)闉g覽器會(huì)為其子級(jí)的變形產(chǎn)生透視效果，但并不會(huì)為其自身產(chǎn)生透視效果

CSS Code復(fù)制內(nèi)容到剪貼板

1. <!-- 在本身元素上設(shè)置透視無(wú)效果 -->   

2. <div style="float:left;margin-right: 10px;border:2px solid gray;">   

3.     <div style="perspective: 200px;width: 100px;height: 100px;border:1px solid black;background-color: pink;transform: rotateX(45deg);"></div>   

4. </div>   

5.   

6. <!-- 在父級(jí)元素上設(shè)置透視有效果 -->   

7. <div style="perspective: 200px; float:left;margin-right: 10px;border:2px solid gray;">   

8.     <div style="width: 100px;height: 100px;border:1px solid black;background-color: lightblue;transform: rotateX(45deg);"></div>   

9. </div>  

透視原點(diǎn)

透視原點(diǎn)perspective-origin是指觀察者的位置，一般地，觀察者位于與屏幕平行的另一個(gè)平面上，觀察者始終是與屏幕垂直的。觀察者的活動(dòng)區(qū)域是被觀察元素的盒模型區(qū)域

perspective-origin

值: x軸 y軸

初始值: 50% 50%

應(yīng)用于: 非inline元素(包括block、inline-block、table、table-cell等)

繼承性: 無(wú)

x軸: left | right | center | <percentage> | <length>y軸: top | bottom | center | <percentage> | <length>

【1】關(guān)鍵字

x軸 left: 0% center: 50% right: 100%y軸 top: 0% center: 50% bottom: 100%

【2】數(shù)值

x軸數(shù)值表示在x軸上離0點(diǎn)(元素邊框外側(cè)左上角)的偏移量；y軸數(shù)值表示在y軸上離0點(diǎn)的偏移量

【3】百分比

其中x軸的百分比相對(duì)于被透視元素的寬度和(width+橫向padding+橫向border)，而y軸的百分比相對(duì)于被透視元素的高度和(height+縱向padding+縱向border)

【4】單個(gè)值

當(dāng)只有一個(gè)值時(shí)，默認(rèn)第二個(gè)值為center

[注意]perspective-origin必須定義在設(shè)置perspective的元素上，也就是說(shuō)必須設(shè)置在元素的父元素或祖先元素上

變形函數(shù)

介紹完透視之后，接下來(lái)詳細(xì)介紹關(guān)于變形3d的變形函數(shù)和變形原點(diǎn)。上篇博文詳細(xì)介紹了2d變形函數(shù)。而3d變形函數(shù)也類似，包括位移、旋轉(zhuǎn)和縮放，沒(méi)有傾斜。

[注意]傾斜skew()是二維變形，不能在三維空間變形，元素可能會(huì)在x軸和y軸傾斜，但不能在z軸傾斜

矩陣matrix3d

3d變形函數(shù)位移、旋轉(zhuǎn)和縮放都是通過(guò)矩陣設(shè)置不同的參數(shù)而實(shí)現(xiàn)的。相比于2d矩陣martrix()的6個(gè)參數(shù)而言，3d矩陣matrix3d卻有12個(gè)參數(shù)。其變形規(guī)則與2dmatrix()類似，只不過(guò)是從3*3矩陣，變成了4*4矩陣

matrix3d(a,b,c,0,d,e,f,0,g,h,i,0,j,k,l,1)

3d位移

3d位移函數(shù)主要包括traslateZ()和translate3d()

translate3d(x,y,z)

[注意]其中，x和y可以是長(zhǎng)度值，也可以是百分比，百分比是相對(duì)于其本身元素水平方向的寬度和垂直方向的高度和；z只能設(shè)置長(zhǎng)度值

traslateZ(z)相當(dāng)于translate3d(0,0,z)

[注意]常用-webkit-transform: translateZ(0);來(lái)開(kāi)啟硬件加速

[注意]3d位移函數(shù)相當(dāng)于matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1) 

3d縮放

3d縮放函數(shù)主要包括scaleZ()和scale3d()

scale3d(x,y,z)

默認(rèn)值為scale3d(1,1,1)，當(dāng)參數(shù)為負(fù)值時(shí)，先翻轉(zhuǎn)再縮放

scaleZ(z)相當(dāng)于scale3d(1,1,z)

[注意]3d位移函數(shù)相當(dāng)于matrix3d(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)

[注意]scaleZ()和scale3d()單獨(dú)使用時(shí)沒(méi)有任何效果

CSS Code復(fù)制內(nèi)容到剪貼板

1. .box1 .in{   

2.     transform: translateZ(-500px);   

3. }   

4. .box2 .in{   

5.     transform: translateZ(-100px);   

6. }   

7. .box3 .in{   

8.     transform: scaleZ(5) translateZ(-100px);   

9. }  

//下圖中從左到右分別是box1,box2,box3。由此得知，box3也相當(dāng)于向z軸移動(dòng)了-500px

所以transform: scaleZ(5) translateZ(-100px)和transform: translateZ(-500px)是等價(jià)的

3d旋轉(zhuǎn)

3d旋轉(zhuǎn)函數(shù)主要包括rotateX()、rotateY()、rotateZ()、rotate3d()

rotate3d(x,y,z,Ndeg)

x、y、z分別用來(lái)描述圍繞x、y、z軸旋轉(zhuǎn)的矢量值。最終變形元素沿著由(0,0,0)和(x,y,z)這兩個(gè)點(diǎn)構(gòu)成的直線為軸，進(jìn)行旋轉(zhuǎn)。當(dāng)N為正數(shù)時(shí)，元素進(jìn)行順時(shí)針旋轉(zhuǎn)；當(dāng)N為負(fù)數(shù)時(shí)，元素進(jìn)行逆時(shí)針旋轉(zhuǎn)

rotateX(Ndeg)相當(dāng)于rotate3d(1,0,0,Ndeg)

rotateY(Ndeg)相當(dāng)于rotate3d(0,1,0,Ndeg)

rotateZ(Ndeg)相當(dāng)于rotate3d(0,0,1,Ndeg)

透視函數(shù)

上面詳細(xì)介紹了透視屬性perspective，但透視屬性應(yīng)用在變形元素的父級(jí)或祖先級(jí)。而透視函數(shù)perspective()是transform變形函數(shù)的一個(gè)屬性值，應(yīng)用于變形元素本身

[注意]由于透視原點(diǎn)perspective-origin只能設(shè)置于設(shè)置了perspective透視屬性的元素。若為元素設(shè)置透視函數(shù)perspective()，則透視原點(diǎn)不起使用，觀察者使用默認(rèn)位置，即元素中心點(diǎn)對(duì)應(yīng)的平面上

perspective(<length>)

透視函數(shù)perspective(<length>)的參數(shù)只能是長(zhǎng)度值，長(zhǎng)度值只能是正數(shù)

[注意]由于transform屬性是從前向后的順序解析屬性值的，所以一定要把perspective()函數(shù)寫(xiě)在其他變形函數(shù)前面，否則將沒(méi)有透視效果 

變形原點(diǎn)

變形2d時(shí)已經(jīng)講過(guò)變形原點(diǎn)，2d變形原點(diǎn)由于沒(méi)有z軸，所以z軸的值默認(rèn)為0。而3d變形原點(diǎn)的z軸是一個(gè)可以設(shè)置的變量

transform-origin

值: x軸 y軸 z軸

初始值: 50% 50%

應(yīng)用于: 非inline元素(包括block、inline-block、table、table-cell等)

繼承性: 無(wú)

[注意]IE9-瀏覽器不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前綴，其他更高版本瀏覽器可使用標(biāo)準(zhǔn)寫(xiě)法

x軸: left | center | right | <length> | <percentage>y軸: top | center | bottom | <length> | <percentage>z軸: <length>

對(duì)于x軸和y軸來(lái)說(shuō)，可以設(shè)置關(guān)鍵字和百分比，分別相對(duì)于其本身元素水平方向的寬度和垂直方向的高度和；z只能設(shè)置長(zhǎng)度值

//變形元素默認(rèn)樣式是 transform:rotate3d(1,1,1,45deg);

背景可見(jiàn)

元素的背面默認(rèn)是可見(jiàn)的。但有時(shí)需要讓元素背面不可見(jiàn)，這就要用到屬性backface-visibility

backface-visibility: 設(shè)置元素背面是否可見(jiàn)

visible:可見(jiàn)，默認(rèn)hidden:不可見(jiàn)

//設(shè)置一個(gè)元素包含兩個(gè)半透明子元素絕對(duì)定位重疊，內(nèi)容分別為A和B，來(lái)表示一個(gè)元素的正面和背面

[注意]若一個(gè)元素覆蓋于另一個(gè)元素上，不僅僅是正面覆蓋，背面也是覆蓋的

變形風(fēng)格

變形風(fēng)格transform-style允許變形元素及其子元素在3d空間中呈現(xiàn)。變形風(fēng)格有兩個(gè)值。flat是默認(rèn)值，表示2d平面；而perserve-3d表示3d空間

[注意]當(dāng)設(shè)置了overflow:非visible或clip:非auto時(shí)，transform-style:preserve-3d失效

transform-style: flat | preserve-3d

關(guān)于“CSS變形transform(3d)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。