transform-style屬性

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

transform-style屬性的使用語(yǔ)法非常簡(jiǎn)單：

transform-style: flat | preserve-3d

其中flat值為默認(rèn)值，表示所有子元素在2D平面呈現(xiàn)。preserve-3d表示所有子元素在3D空間中呈現(xiàn)。

也就是說(shuō)，如果對(duì)一個(gè)元素設(shè)置了transform-style的值為flat，則該元素的所有子元素都將被平展到該元素的2D平面中進(jìn)行呈現(xiàn)。沿著X軸或Y軸方向旋轉(zhuǎn)該元素將導(dǎo)致位于正或負(fù)Z軸位置的子元素顯示在該元素的平面上，而不是它的前面或者后面。如果對(duì)一個(gè)元素設(shè)置了transform-style的值為preserve-3d，它表示不執(zhí)行平展操作，他的所有子元素位于3D空間中。

transform-style屬性需要設(shè)置在父元素中，并且高于任何嵌套的變形元素。

?如果你的元素設(shè)置了transform-style值為preserve-3d，就不能為了防止子元素溢出容器而設(shè)置overflow值為hidden，如果設(shè)置了overflow:hidden同樣可以迫使子元素出現(xiàn)在同一平面（和元素設(shè)置了transform-style為flat一樣的效果）

perspective屬性

perspective屬性對(duì)于3D變形來(lái)說(shuō)至關(guān)重要。該屬性會(huì)設(shè)置查看者的位置，并將可視內(nèi)容映射到一個(gè)視錐上，繼而投到一個(gè)2D視平面上。如果不指定透視，則Z軸空間中的所有點(diǎn)將平鋪到同一個(gè)2D視平面中，并且變換結(jié)果中將不存在景深概念。

上面的描述可能讓人難以理解一些，其實(shí)對(duì)于perspective屬性，我們可以簡(jiǎn)單的理解為視距，用來(lái)設(shè)置用戶(hù)和元素3D空間Z平面之間的距離。而其效應(yīng)由他的值來(lái)決定，值越小，用戶(hù)與3D空間Z平面距離越近，視覺(jué)效果更令人印象深刻；反之，值越大，用戶(hù)與3D空間Z平面距離越遠(yuǎn)，視覺(jué)效果就很小。

perspective：none | <length>

perspective屬性包括兩個(gè)屬性：none和具有單位的長(zhǎng)度值。其中perspective屬性的默認(rèn)值為none，表示無(wú)限的角度來(lái)看3D物體，但看上去是平的。另一個(gè)值<length>接受一個(gè)長(zhǎng)度單位大于0的值。而且其單位不能為百分比值。<length>值越大，角度出現(xiàn)的越遠(yuǎn)，從而創(chuàng)建一個(gè)相當(dāng)?shù)偷膹?qiáng)度和非常小的3D空間變化。反之，此值越小，角度出現(xiàn)的越近，從而創(chuàng)建一個(gè)高強(qiáng)度的角度和一個(gè)大型3D變化。

我們可對(duì)perspective取值做一個(gè)簡(jiǎn)單的結(jié)論：

• ?perspective取值為none或不設(shè)置，就沒(méi)有真3D空間。
• ?perspective取值越小，3D效果就越明顯，也就是你的眼睛越靠近真3D。
• ?perspective的值無(wú)窮大，或值為0時(shí)與取值為none效果一樣。

為了更好的理解perspective屬性，我們很有必要把他和translateZ的關(guān)系結(jié)合起來(lái)。其實(shí)也可以把perspective的值簡(jiǎn)單的理解為人的眼睛到顯示器的距離，而translate就是3D物體距離源點(diǎn)的距離，下面引用W3C的一張圖來(lái)解說(shuō)perspective和translateZ的關(guān)系。

上圖顯示了perspective屬性和translateZ的位置比例。在頂部的圖，Z是半個(gè)d，為了使用原始圓（輪廓）看起來(lái)出現(xiàn)在Z軸上（虛線(xiàn)圓），畫(huà)布上的實(shí)體圓將擴(kuò)大兩部，如淺藍(lán)色的圓。在底部圖中顯示，圓按比例縮小，致使虛線(xiàn)圓出現(xiàn)在畫(huà)布后面，并且z的大小是距原始位置三分之一。

在3D變形中，除了perspective屬性可以激活一個(gè)3D空間之外，在3D變形的函數(shù)中的perspective()也可以激活3D空間。他們不同的地方是：perspective用在舞臺(tái)元素上（變形元素們的共同父元素）；perspective()就是用在當(dāng)前變形元素上，并且可以與其他的transform函數(shù)一起使用。例如，我們可以把：

.stage {perspective: 600px }

寫(xiě)成：

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

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

• ?perspective屬性可以取值為none或長(zhǎng)度值；而perspective()函數(shù)取值只能大于0，如果取值為0或比0小的值，將無(wú)法激活3D空間；
• ?perspective屬性用于變形對(duì)像父元素；而perspective()函數(shù)用于變形對(duì)像自身，并和transform其他函數(shù)一起使用。

perspective-origin屬性

perspective-origin屬性是3D變形中另一個(gè)重要屬性，主要用來(lái)決定perspective屬性的源點(diǎn)角度。它實(shí)際上設(shè)置了X軸和Y軸位置，在該位置觀看者好像在觀看該元素的子元素。

perspective-origin屬性的使用語(yǔ)法也很簡(jiǎn)單：

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

該屬性的默認(rèn)值為“50% 50%”(也就是center)，其也可以設(shè)置為一個(gè)值，也可以設(shè)置為兩個(gè)長(zhǎng)度值：

• ?第一個(gè)長(zhǎng)度值指定相對(duì)于元素的包含框的X軸上的位置。它可以是長(zhǎng)度值（以受支持的長(zhǎng)度單位表示）、百分比或以下三個(gè)關(guān)鍵詞之一：left（表示在包含框的X軸方向長(zhǎng)度的0%），center（表示中間點(diǎn)）,或right（表示長(zhǎng)度的100%）。
• ?第二個(gè)長(zhǎng)度值指定相對(duì)于元素的包含框的Y軸上的位置。它可以是長(zhǎng)度值、百分比或以下三個(gè)關(guān)鍵詞之一：top（表示在包含框的Y軸方向長(zhǎng)度的0%），center（表示中間點(diǎn)），或bottom（表示長(zhǎng)度的100%）。

為了指轉(zhuǎn)換子元素變形的深度，perspective-origin屬性必須定義父元素上。通常perspective-origin屬性本身不做任何事情，它必須被定義在設(shè)置了perspective屬性的元素上。換句話(huà)說(shuō)，perspective-origin屬性需要與perspective屬性結(jié)合起來(lái)使用，以便將視點(diǎn)移至元素的中心以外位置，如下圖所示：

往往我們看一樣?xùn)|西不可能一直都在中心位置看，想換個(gè)角度，換個(gè)位置一看究竟，這個(gè)時(shí)候就離不開(kāi)perspective-origin這個(gè)屬性，下面來(lái)自于W3C官網(wǎng)的圖可以簡(jiǎn)單闡述這一觀點(diǎn)：

backface-visibility屬性

backface-visibility屬性決定元素旋轉(zhuǎn)背面是否可見(jiàn)。對(duì)于未旋轉(zhuǎn)的元素，該元素的正面面向觀看者。當(dāng)其Y軸旋轉(zhuǎn)約180度時(shí)會(huì)導(dǎo)致元素的背面面對(duì)觀眾。

backface-visibility屬性使用語(yǔ)法很簡(jiǎn)單：

backface-visibility: visible | hidden

該屬性被設(shè)置為以下兩個(gè)關(guān)鍵詞之一：

• ?visible：為backface-visibility的默認(rèn)值，表示反面可見(jiàn)
• ?hidden：表示反面不可見(jiàn)

一個(gè)元素的可見(jiàn)性與“backface-visibility:hidden”決定如下：

• ?元素在3D環(huán)境下渲染上下文，將根據(jù)3D變形矩陣來(lái)計(jì)算，反之元素不在3D環(huán)境下渲染上下文，將根據(jù)2D變形矩陣來(lái)計(jì)算。
• ?如果組件的矩陣在第3行、3列是負(fù)值，那么元素反面是隱藏，反之是可見(jiàn)的。
• 簡(jiǎn)單點(diǎn)來(lái)說(shuō)，backface-visibility屬性可用于隱藏內(nèi)容的背面。默認(rèn)情況下，背面可見(jiàn)，這意味著即使在翻轉(zhuǎn)后，旋轉(zhuǎn)的內(nèi)容仍然可見(jiàn)。但當(dāng)backface-visibility設(shè)置為hidden時(shí)，旋轉(zhuǎn)后內(nèi)容將隱藏，因?yàn)樾D(zhuǎn)后正面將不再可見(jiàn)。該功能可幫助您模擬多面的對(duì)象，例如下例中使用的紙牌。通過(guò)將backface-visibility設(shè)置為hidden，您可以輕松確保只有正面可見(jiàn)。

上例或許讓您能更清楚的了解backface-visibility的visible和hidden的區(qū)別，上圖中左邊立方體每個(gè)頁(yè)我們都能看得到，而右邊的立方體我們只能看到視力范圍的面。

?

?

轉(zhuǎn)載自http://www.w3cplus.com/css3/transform-basic-property.html

?

轉(zhuǎn)載于:https://www.cnblogs.com/yuxingyoucan/p/6080250.html

總結(jié)

以上是生活随笔為你收集整理的CSS3-transform-style的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。