CSS3的2D與3D轉換

標籤：

2D和3D轉換涉及到數學中的知識，作為一個數學專業的畢業生，不研究一下豈不是對不起自己的專業？

首先來看幾個參數：

1、transform-origin：origin(起源，起點)，也即變形的起點，在數學上可以理解為座標原點。

　　其文法為：transform-origin：[<percentage> | <length> | left | center | right | top | bottom] | [<percentage> | <length> | left | center | right] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | center | bottom]] <length> ?

　　描述為普通語言為：

　　/*只設定一個值的文法*/
　　transform-origin: x-offset
　　transform-origin:offset-keyword
　　/*設定兩個值的文法*/
　　transform-origin：x-offset y-offset
　　transform-origin：y-offset x-offset-keyword
　　transform-origin：x-offset-keyword y-offset
　　transform-origin：x-offset-keyword y-offset-keyword
　　transform-origin：y-offset-keyword x-offset-keyword
　　/*設定三個值的文法*/
　　transform-origin：x-offset y-offset z-offset
　　transform-origin：y-offset x-offset-keyword z-offset
　　transform-origin：x-offset-keyword y-offset z-offset
　　transform-origin：x-offset-keyword y-offset-keyword z-offset
　　transform-origin：y-offset-keyword x-offset-keyword z-offset

　　transform-origin屬性值可以是百分比、em、px等具體的值，也可以是top、right、bottom、left和center這樣的關鍵詞。預設值為50%,50%,0。

• x-offset：用來設定transform-origin水平方向Ｘ軸的位移量，可以使用<length>和<percentage>值，同時也可以是正值（從中心點沿水平方向Ｘ軸向右位移量），也可以是負值（從中心點沿水平方向Ｘ軸向左位移量）。
•  offset-keyword：是top、right、bottom、left或center中的一個關鍵詞，可以用來設定transform-origin的位移量。
•  y-offset：用來設定transform-origin屬性在垂直方向Ｙ軸的位移量，可以使用<length>和<percentage>值，同時可以是正值（從中心點沿垂直方向Ｙ軸向下的位移量），也可以是負值（從中心點沿垂直方向Ｙ軸向上的位移量）。
•  x-offset-keyword：是left、right或center中的一個關鍵詞，可以用來設定transform-origin屬性值在水平Ｘ軸的位移量。
•  y-offset-keyword：是top、bottom或center中的一個關鍵詞，可以用來設定transform-origin屬性值在垂直方向Ｙ軸的位移量。
•  z-offset：用來設定3D變形中transform-origin遠離使用者眼睛視點的距離，預設值z=0，其取值可以<length>，不過<percentage>在這裡將無效。

　　transform-origin屬性值可以是百分比、em、px等具體的值，也可以是top、right、bottom、left和center這樣的關鍵詞。預設值為50%,50%,0。

2、transform-style：指定嵌套元素如何在3D空間中呈現。

　　有兩個屬性值：flat和preserve-3d。其中flat值為預設值，表示所有子項目在2D平面呈現。preserve-3d表示所有子項目在3D空間中呈現。

　　如果對一個元素設定了transform-style的值為flat，則該元素的所有子項目都將被平展到該元素的2D平面中進行呈現。沿著X軸或Y軸方向旋轉該元素將導致位於正或負Z軸位置的子項目顯示在該元素的平面上，而不是它的前面或者後面。如果對一個元素設定了transform-style的值為preserve-3d，它表示不執行平展操作，他的所有子項目位於3D空間中。transform-style屬性需要設定在父元素中，並且高於任何嵌套的變形元素。

　　即transform-style的值為flat時，其子項目並不會受到rotateX等的影響，而是直接與父元素疊加在一起，和父元素處於同一平面上。當值為preserve-3d時，子項目與父元素分離，受單獨的屬性控制。

　　有一點需要注意，如果你的元素設定了transform-style值為preserve-3d，就不能為了防止子項目溢出容器而設定overflow值為hidden，如果設定了overflow:hidden同樣可以迫使子項目出現在同一平面（和元素設定了transform-style為flat一樣的效果）。

3、perspective：對於3D變換最重要的屬性，意思為透視，透視的。

　　在兩維的平面上利用線和面趨向會合的視錯覺原理刻畫三維物體的藝術表現手法。

　　透視圖：在人與建築物之間設立一個透明的鉛垂面K作為投影面，人的視線（投射線）透過投影面而與投影面相交所得的圖形，稱為透視圖，或稱為透視投影，簡稱透視。根據透視的原理繪製的圖，多用於機械工程和建築工程。

　　透視的產生：因為有了光我們才得以看到自然界中的一切，這個過程就是光線照射到物體上並通過眼球內水晶體把光線反射到我們眼內視網膜上而形成映像，我們把光線在眼球水晶體的折射焦點叫做視點，視網膜上所呈現的映像稱為畫面。只是人腦通過自身的機能處理將倒過來的映像轉換成正立映像。如果我們在眼前假定一個平面或放置一透明平面，以此來截獲物體反射到眼球內的光線，就會得到與實物一致的映像，這個假定平面，也就是我們平時畫畫的畫面。

　　相關術語：

基面	形體所在的水平面，用字母G表示。基面相當於三投影面體系中的水平投影面H。
畫面	透視圖所在的平面，一般為鉛垂面，用字母P表示。也可以用傾斜平面做畫面。
基準	基面與畫面的交線，用字母gl表示。
視點	觀看者眼睛所在的位置，用字母S表示。
網站	觀看者站定的位置，即視點S的基面上的正投影，用E表示。
心點	視點S在畫面上的正投影，用字母Vc表示。
主視線	垂直於畫面P的視線，也就是過視點S和心點Vc的直線。也叫中心視線。
視平面	過視點S的水平面。

　　可分為一點透視、兩點透視、三點透視。

　　上面介紹了透視的相關知識，現在開始是正題。

　　perspective屬性會設定查看者的位置，並將可視內容映射到一個視錐上，繼而投到一個2D視平面上。如果不指定透視，則Z軸空間中的所有點將平鋪到同一個2D視平面中，並且變換結果中將不存在景深概念。

　　我們可以簡單的理解為視距，用來設定使用者和元素3D空間Z平面之間的距離。而其效應由他的值來決定，值越小，使用者與3D空間Z平面距離越近，視覺效果更令人印象深刻；反之，值越大，使用者與3D空間Z平面距離越遠，視覺效果就很小。

　　在3D變形中，對於某些變形，perspective屬性對於查看變形的效果來說必不可少。

　　perspective屬性包括兩個屬性：none和具有單位的長度值。其中perspective屬性的預設值為none，表示無限的角度來看3D物體，但看上去是平的。另一個值<length>接受一個長度單位大於0的值。而且其單位不能為百分比值。<length>值越大，角度出現的越遠，從而建立一個相當低的強度和非常小的3D空間變化。反之，此值越小，角度出現的越近，從而建立一個高強度的角度和一個大型3D變化。

　　比如你站在10英尺和1000英尺的地方看一個10英尺的立方體。在10英尺的地方，你距離立方體是一樣的尺寸。因此視角轉變遠遠大於站在1000英尺處的，立體尺寸是你距離立方體距離的百分之一。同樣的思維適用於perspective的<length>值。

　　依據上面的介紹，我們可對perspective取值做一個簡單的結論：

•  perspective取值為none或不設定，就沒有真3D空間。
•  perspective取值越小，3D效果就越明顯，也就是你的眼睛越靠近真3D。
•  perspective的值無窮大，或值為0時與取值為none效果一樣。

　　為了更好的理解perspective屬性，我們很有必要把他和translateZ的關係結合起來。其實也可以把perspective的值簡單的理解為人的眼睛到顯示器的距離，而translate就是3D物體距離源點的距離，下面引用w3cplus的一張圖來解說perspective和translateZ的關係。

　　顯示了perspective屬性和translateZ的位置比例。要頂部的圖，Z是半個d，為了使用原始圓（輪廓）看起來出現在Z軸上（虛線圓），畫布上的實體圓將擴大兩部，如淺藍色的圓。在底部圖中顯示，圓按比例縮小，致使虛線圓出現在畫布後面，並且z的大小是距原始位置三分之一。

　　perspective是針對父元素的，設定人眼與父元素間距離，父元素可以理解為子項目的投影處，即父元素為子項目的畫布。translateZ則是設定子項目與畫布的距離的。

　　在3D變形中，除了perspective屬性可以啟用一個3D空間之外，在3D變形的函數中的perspective()也可以啟用3D空間。他們不同的地方是：perspective用在舞台元素上（變形元素們的共同父元素）；perspective()就是用在當前變形元素上，並且可以與其他的transform函數一起使用。

　　雖然perspective屬性和perspective()函數所起的功能是一樣的，但其取值以及以運用的對像有所不同：

•  perspective屬性可以取值為none或長度值；而perspective()函數取值只能大於0，如果取值為0或比0小的值，將無法啟用3D空間；
•  perspective屬性用於變形對像父元素；而perspective()函數用於變形對像自身，並和transform其他函數一起使用。

4、perspective-origin:

　　3D變形中另一個重要屬性，主要用來決定perspective屬性的源點角度。它實際上設定了X軸和Y軸位置，在該位置觀看者好像在觀看該元素的子項目。

　　perspective-origin：[<percentage> | <length> | left | center | right | top | bottom] | [[<percentage> | <length> | left | center | right] && [<percentage> | <length> | top | center | bottom]]　

　　該屬性的預設值為“50% 50%”(也就是center)，其也可以設定為一個值，也可以設定為兩個長度值。

•  第一個長度值指定相對於元素的包含框的X軸上的位置。它可以是長度值（以受支援的長度單位表示）、百分比或以下三個關鍵詞之一：left（表示在包含框的X軸方向長度的0%），center（表示中間點）,或right（表示長度的100%）。
•  第二個長度值指定相對於元素的包含框的Y軸上的位置。它可以是長度值、百分比或以下三個關鍵詞之一：top（表示在包含框的Y軸方向長度的0%），center（表示中間點），或bottom（表示長度的100%）。

　　注意，為了指轉換子項目變形的深度，perspective-origin屬性必須定義父元素上。通常perspective-origin屬性本身不做任何事情，它必須被定義在設定了perspective屬性的元素上。換句話說，perspective-origin屬性需要與perspective屬性結合起來使用，以便將視點移至元素的中心以外位置。

　　往往我們看一樣東西不可能一直都在中心位置看，想換個角度，換個位置一看究竟，這個時候就離不開perspective-origin這個屬性，下面來自於W3C官網的圖可以簡單闡述這一觀點：

　　接下來的樣本示範了修改perspective-origin的屬性值對立方體的影響：

　　介紹了這麼多複雜的屬性了，介紹一個簡單的歇歇腳。

　　5、backface-visibility

　　很簡單的一個屬性，visible | hidden兩個值可選，相當於是否使元素透明，透明的時候即visible，在轉至背面時，也可以看到內容，內容是反的。hidden既不可見。

　　一個元素的可見度與“backface-visibility:hidden”決定如下：

•  元素在3D環境下渲染上下文，將根據3D變形矩陣來計算，反之元素不在3D環境下渲染上下文，將根據2D變形矩陣來計算。
•  如果組件的矩陣在第3行、3列是負值，那麼元素反面是隱藏，反之是可見的。

　　簡單點來說，backface-visibility屬性可用於隱藏內容的背面。預設情況下，背面可見，這意味著即使在翻轉後，旋轉的內容仍然可見。但當backface-visibility設定為hidden時，旋轉後內容將隱藏，因為旋轉後正面將不再可見。該功能可協助您類比多面的對象，您可以輕鬆確保只有正面可見。

　　上述內容轉自：http://www.w3cplus.com/css3/transform-basic-property.html。

 

CSS3的2D與3D轉換