目錄[1]坐標軸 [2]透視 [3]變形函數(shù) [4]透視函數(shù) [5]變形原點 [6]背景可見 [7]變形風格前面的話

本文將詳細介紹關(guān)于transform變形3D的內(nèi)容，但需以了解transform變形2D為基礎(chǔ)。3D變形涉及的屬性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility

坐標軸

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

透視

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

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

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

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

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

觀察者是瀏覽器模擬出來的用來觀察被透視元素的一個沒有尺寸的點，觀察者發(fā)出視線，類似于一個點光源發(fā)出光線。

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

透視距離

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

值: none | <length>

初始值: none

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

繼承性: 無

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

[注意]透視perspective不可取百分比，因為百分比需要相對的元素，但z軸并沒有可相對的元素尺寸

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

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

透視原點

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

perspective-origin

值: x軸 y軸

初始值: 50% 50%

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

繼承性: 無

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點(元素邊框外側(cè)左上角)的偏移量；y軸數(shù)值表示在y軸上離0點的偏移量

【3】百分比

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

【4】單個值

當只有一個值時，默認第二個值為center

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

變形函數(shù)

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

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

矩陣matrix3d

3d變形函數(shù)位移、旋轉(zhuǎn)和縮放都是通過矩陣設(shè)置不同的參數(shù)而實現(xiàn)的。相比于2d矩陣martrix()的6個參數(shù)而言，3d矩陣matrix3d卻有12個參數(shù)。其變形規(guī)則與2dmatrix()類似，只不過是從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可以是長度值，也可以是百分比，百分比是相對于其本身元素水平方向的寬度和垂直方向的高度和；z只能設(shè)置長度值

traslateZ(z)相當于translate3d(0,0,z)

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

[注意]3d位移函數(shù)相當于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)

默認值為scale3d(1,1,1)，當參數(shù)為負值時，先翻轉(zhuǎn)再縮放

scaleZ(z)相當于scale3d(1,1,z)

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

[注意]scaleZ()和scale3d()單獨使用時沒有任何效果

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

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

3d旋轉(zhuǎn)

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

rotate3d(x,y,z,Ndeg)

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

rotateX(Ndeg)相當于rotate3d(1,0,0,Ndeg)

rotateY(Ndeg)相當于rotate3d(0,1,0,Ndeg)

rotateZ(Ndeg)相當于rotate3d(0,0,1,Ndeg)

透視函數(shù)

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

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

perspective(<length>)

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

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

變形原點

變形2d時已經(jīng)講過變形原點，2d變形原點由于沒有z軸，所以z軸的值默認為0。而3d變形原點的z軸是一個可以設(shè)置的變量

transform-origin

值: x軸 y軸 z軸

初始值: 50% 50%

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

繼承性: 無

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

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

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

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

背景可見

元素的背面默認是可見的。但有時需要讓元素背面不可見，這就要用到屬性backface-visibility

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

visible:可見，默認hidden:不可見

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

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

變形風格

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

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

transform-style: flat | preserve-3d

以上這篇深入剖析CSS變形transform(3d)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論