透视

为了触发3D空间体系规则，在元素上需要使用perspective属性，这里有两种方式来进行设置。第一种方式是使用transform属性里的perspective()函数：

transform: perspective(400px);

比如：

.panel--red {
    /* transform中的透视函数 */
    transform: perspective(400px) rotateY(45deg);
}

第二种方式是用perspective属性：

perspective: 400px;

比如：

.scene--blue {
  /* perspective property */
  perspective: 400px;
}

.panel--blue {
  transform: rotateY(45deg);
}

这两种方式都可以触发3D空间体系规则，并且可以达到相同的视觉效果。但是，这里有一处不同，函数式的声明方式可以非常方便的把3D transform应用到一个单独元素（比如在上边红色正方形的例子里，我把它与rotateY结合在一起，写到了同一个transform中）。这样可以用简写的方式来将一个单独元素转换为3D展示规则。

但是，当用在多个元素上时，效果就不太理想了，转换后的多个元素会看起来不太整齐一致。这是因为它们每一个元素有着自己的透视效果和消失点。为了弥补这个缺陷，可以将perspective属性添加到它们的父元素上，这样每一个子元素都可以共享同一个消失点，共享同一个3D空间体系。

.panel--separate {
  transform: perspective(400px) rotateY(45deg);
}

.scene--together {
  perspective: 400px;
}

.panel--together {
  transform: rotateY(45deg);
}

perspective的值指的是3D视觉效果的渲染程度。可以把它理解成观察者与物体的距离，perspective的值越大，意味着这个距离越远，那么3D的视觉效果看起来会越弱。比如，perspective: 2000px 只会产生非常微妙的3D效果，这就像我们通过一个双筒望远镜看远处的物体。perspective: 100px 将会产生强烈的3D效果，这就像一只小昆虫看一个巨大的物体一样。

当然你也可以对3D变换不加perspective属性，可以设置perspective: none 或者压根不设置perspective。如果不设置perspective，那么平行的平面将会正交并且不存在消失点。

3D空间体系的消失点默认是在中心位置，你可以通过perspective-origin属性来改变消失点的位置。

perspective-origin: 25% 75%;