perspective 透視

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

1. 官方解釋

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

當(dāng)為元素定義 perspective 屬性時(shí)，其子元素會(huì)獲得透視效果，而不是元素本身。

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

當(dāng)為元素定義 perspective-origin 屬性時(shí)，其子元素會(huì)獲得透視效果，而不是元素本身。

2. 解釋

通過(guò)在父級(jí)元素設(shè)置這兩個(gè)屬性，可以簡(jiǎn)單的理解為設(shè)置一個(gè)觀察者的位置，也就是我們的眼睛 perspective 的大小代表眼睛距離元素的位置。

perspective-origin，代表眼睛所在的坐標(biāo)點(diǎn)，我們可以設(shè)置 x 軸和 y 軸，這兩個(gè)屬性其實(shí)就間接的組成了 （x,y,z）空間坐標(biāo)組，要注意的是，這是設(shè)置都是在父元素上進(jìn)行的。

3. 語(yǔ)法

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

4. 兼容性

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

5. 實(shí)例

1. 增加一個(gè) 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. 修改觀察點(diǎn)的位置為 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. 經(jīng)驗(yàn)分享

perspective-origin 通常使用 % 代表在觀察父元素，觀察點(diǎn)的坐標(biāo)。

7. 小結(jié)

1. 推薦設(shè)置 none 而不是 0 ，內(nèi)部的子元素不會(huì)透視。

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

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