perspective 透視

透視距離和透視位置可以更好地觀察擁有 3D 效果的元素。

1. 官方解釋

perspective 屬性定義 3D 元素距視圖的距離，以像素計算。該屬性允許您改變 3D 元素查看 3D 元素的視圖。

當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。

perspective-origin 屬性定義 3D 元素所基于的 X 軸和 Y 軸。該屬性允許您改變 3D 元素的底部位置。

當為元素定義 perspective-origin 屬性時，其子元素會獲得透視效果，而不是元素本身。

2. 解釋

通過在父級元素設置這兩個屬性，可以簡單的理解為設置一個觀察者的位置，也就是我們的眼睛 perspective 的大小代表眼睛距離元素的位置。

perspective-origin，代表眼睛所在的坐標點，我們可以設置 x 軸和 y 軸，這兩個屬性其實就間接的組成了 （x,y,z）空間坐標組，要注意的是，這是設置都是在父元素上進行的。

3. 語法

div
{
	perspective: px;
	perspective-origin: ,;
}

4. 兼容性

目前瀏覽器都不支持 perspective 屬性。
Chrome 和 Safari 支持替代的 -webkit-perspective 屬性。

5. 實例

1. 增加一個 500px 的透視效果

<div class="demo">
	<div class="cell"></div>
</div>

.demo{
	perspective: px;
	background: #f2f2f2;
}
.cell{
	width: px;
	height: px;
	background: #000;
	transform: translate@H_301_204@d(px,-px,-px) @H_301_204@rotateY(deg);
}

效果圖：

解釋：加了 500px 的透視效果。

2. 修改觀察點的位置為 50% 50% 。

.demo{
	perspective: px;
	background: #f2f2f2;
	perspective-origin: ;
}
.cell{
	width: px;
	height: px;
	background: #000;
	transform: translate@H_301_204@d(px,-px,-px) @H_301_204@rotateY(deg);
}

效果圖:

6. 經驗分享

perspective-origin 通常使用 % 代表在觀察父元素，觀察點的坐標。

7. 小結

1. 推薦設置 none 而不是 0 ，內部的子元素不會透視。

2. 該屬性的作用范圍是針對子元素讓其具有透視效果。

3. 不可以使用 % 數作為透視距離。