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

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

在3D變形中，對于某些變形，例如下面的示例演示的沿Z軸的變形，perspective屬性對于查看變形的效果來說必不可少。

我們先來看一個簡單的實例，制作一個撲克牌3D旋轉(zhuǎn)效果，并且一個在撲克牌的父元素添加了視距perspective，而另一個卻沒有設(shè)置：

HTML

CSS

其效果如下：

上圖的效果完全說明了一切。父節(jié)點沒有設(shè)置perspective的情況下，梅花King的3D旋轉(zhuǎn)效果不明顯，而在父節(jié)點設(shè)置perspective后，梅花King才像個3D旋轉(zhuǎn)。

上例簡單的演示了perspective的使用方法，我們回過頭來，看看perspective的使用語法：

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

比如你站在10英尺和1000英尺的地方看一個10英尺的立方體。在10英尺的地方，你距離立方體是一樣的尺寸。因此視角轉(zhuǎn)變遠遠大于站在1000英尺處的，立體尺寸是你距離立方體距離的百分之一。同樣的思維適用于perspective的<length>值。我們一起來看一個實例，來加強這方面的理解：

HTML

CSS

效果如下圖所示：

依據(jù)上面的介紹，我們可對perspective取值做一個簡單的結(jié)論：

 1.perspective取值為none或不設(shè)置，就沒有真3D空間。
 2.perspective取值越小，3D效果就越明顯，也就是你的眼睛越靠近真3D。
 3.perspective的值無窮大，或值為0時與取值為none效果一樣。
為了更好的理解perspective屬性，我們很有必要把他和translateZ的關(guān)系結(jié)合起來。其實也可以把perspective的值簡單的理解為人的眼睛到顯示器的距離，而translate就是3D物體距離源點的距離，下面引用W3C的一張圖來解說perspective和translateZ的關(guān)系。

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

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

寫成：

來看一個簡單示例：

HTML

CSS

效果如下所示：

上圖效果可以看出，雖然書寫的形式，屬性名稱不一致，但是效果卻一樣。

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

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

perspective-origin屬性

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

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

 第一個長度值指定相對于元素的包含框的X軸上的位置。它可以是長度值（以受支持的長度單位表示）、百分比或以下三個關(guān)鍵詞之一：left（表示在包含框的X軸方向長度的0%），center（表示中間點）,或right（表示長度的100%）。
 第二個長度值指定相對于元素的包含框的Y軸上的位置。它可以是長度值、百分比或以下三個關(guān)鍵詞之一：top（表示在包含框的Y軸方向長度的0%），center（表示中間點），或bottom（表示長度的100%）。
注意，為了指轉(zhuǎn)換子元素變形的深度，perspective-origin屬性必須定義父元素上。通常perspective-origin屬性本身不做任何事情，它必須被定義在設(shè)置了perspective屬性的元素上。換句話說，perspective-origin屬性需要與perspective屬性結(jié)合起來使用，以便將視點移至元素的中心以外位置，如下圖所示：

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

最新評論