透视距离和透视位置可以更好地观察拥有 3D 的元素。

perspective 定义 3D 元素距视图的距离，以像素计算。该允许您改变 3D 元素查看 3D 元素的视图。

当为元素定义 perspective 时，其子元素会获得透视，而不是元素本身。

perspective-origin 定义 3D 元素所基于的 X 轴和 Y 轴。该允许您改变 3D 元素的位置。

当为元素定义 perspective-origin 时，其子元素会获得透视，而不是元素本身。

通过在父级元素设置这两个，可以简单的理解为设置观察者的位置，也就是我们的眼睛 perspective 的大小代表眼睛距离元素的位置。

perspective-origin，代表眼睛所在的坐标点，我们可以设置 x 轴和 y 轴，这两个其实就间接的组成了 （x,y,z）空间坐标组，要注意的是，这是设置都是在父元素上进行的。

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

目前浏览器都 perspective 。
Chrome 和 Safari 替代的 -webkit-perspective 。

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

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

图：

解释：加了 500px 的透视。

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

图:

perspective-origin 通常使用 % 代表在观察父元素，观察点的坐标。