CSS3-transform-style

transform-style屬性

transform-style屬性是3D空間一個重要屬性，指定嵌套元素如何在3D空間中呈現。他主要有兩個屬性值：flat和preserve-3d。

transform-style屬性的使用語法很是簡單：

transform-style: flat | preserve-3d 

其中flat值爲默認值，表示全部子元素在2D平面呈現。preserve-3d表示全部子元素在3D空間中呈現。

也就是說，若是對一個元素設置了transform-style的值爲flat，則該元素的全部子元素都將被平展到該元素的2D平面中進行呈現。沿着X軸或Y軸方向旋轉該元素將致使位於正或負Z軸位置的子元素顯示在該元素的平面上，而不是它的前面或者後面。若是對一個元素設置了transform-style的值爲preserve-3d，它表示不執行平展操做，他的全部子元素位於3D空間中。

transform-style屬性須要設置在父元素中，而且高於任何嵌套的變形元素。

 若是你的元素設置了transform-style值爲preserve-3d，就不能爲了防止子元素溢出容器而設置overflow值爲hidden，若是設置了overflow:hidden一樣能夠迫使子元素出如今同一平面（和元素設置了transform-style爲flat同樣的效果）

perspective屬性

perspective屬性對於3D變形來講相當重要。該屬性會設置查看者的位置，並將可視內容映射到一個視錐上，繼而投到一個2D視平面上。若是不指定透視，則Z軸空間中的全部點將平鋪到同一個2D視平面中，而且變換結果中將不存在景深概念。

上面的描述可能讓人難以理解一些，其實對於perspective屬性，咱們能夠簡單的理解爲視距，用來設置用戶和元素3D空間Z平面之間的距離。而其效應由他的值來決定，值越小，用戶與3D空間Z平面距離越近，視覺效果更使人印象深入；反之，值越大，用戶與3D空間Z平面距離越遠，視覺效果就很小。

perspective：none | <length>

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

咱們可對perspective取值作一個簡單的結論：

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

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

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

在3D變形中，除了perspective屬性能夠激活一個3D空間以外，在3D變形的函數中的perspective()也能夠激活3D空間。他們不一樣的地方是：perspective用在舞臺元素上（變形元素們的共同父元素）；perspective()就是用在當前變形元素上，而且能夠與其餘的transform函數一塊兒使用。例如，咱們能夠把：

.stage { perspective: 600px }

寫成：

.stage .box { transform: perspective(600px); }

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

•  perspective屬性能夠取值爲none或長度值；而perspective()函數取值只能大於0，若是取值爲0或比0小的值，將沒法激活3D空間；
•  perspective屬性用於變形對像父元素；而perspective()函數用於變形對像自身，並和transform其餘函數一塊兒使用。

perspective-origin屬性

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

perspective-origin屬性的使用語法也很簡單：

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官網的圖能夠簡單闡述這一觀點：

backface-visibility屬性

backface-visibility屬性決定元素旋轉背面是否可見。對於未旋轉的元素，該元素的正面面向觀看者。當其Y軸旋轉約180度時會致使元素的背面面對觀衆。

backface-visibility屬性使用語法很簡單：

backface-visibility: visible | hidden 

該屬性被設置爲如下兩個關鍵詞之一：

•  visible：爲backface-visibility的默認值，表示反面可見
•  hidden：表示反面不可見

一個元素的可見性與「backface-visibility:hidden」決定以下：

•  元素在3D環境下渲染上下文，將根據3D變形矩陣來計算，反之元素不在3D環境下渲染上下文，將根據2D變形矩陣來計算。
•  若是組件的矩陣在第3行、3列是負值，那麼元素反面是隱藏，反之是可見的。
• 簡單點來講，backface-visibility屬性可用於隱藏內容的背面。默認狀況下，背面可見，這意味着即便在翻轉後，旋轉的內容仍然可見。但當backface-visibility設置爲hidden時，旋轉後內容將隱藏，由於旋轉後正面將再也不可見。該功能可幫助您模擬多面的對象，例以下例中使用的紙牌。經過將backface-visibility設置爲hidden，您能夠輕鬆確保只有正面可見。

上例或許讓您能更清楚的瞭解backface-visibility的visible和hidden的區別，上圖中左邊立方體每一個頁咱們都能看獲得，而右邊的立方體咱們只能看到視力範圍的面。

 

 

轉載自http://www.w3cplus.com/css3/transform-basic-property.html