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

?

轉載于:https://www.cnblogs.com/yuxingyoucan/p/6080250.html

總結

以上是生活随笔為你收集整理的CSS3-transform-style的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。