CSS3-转换之perspective

规定3D元素的透视效果。定义3D元素距视图的距离，以像素计。该属性允许改变3D元素查看3D元素的视图。
默认值：none。
继承性：yes。
JavaScript语法：object.style.perspective=500.

注：perspective属性只影响3D转换元素。

可取的值有：
number - 元素距离视图的距离，以像素计；
none - 默认值，与0相同，不设置透视

资料显示浏览器均不支持perspective属性，chrome和Safari支持替代的-webkit-perspective属性。但是经测试，结果如下：
1、IE10+支持perspective属性，并且也支持替代属性-ms-perspective；
2、Firefox优先支持perspective、-moz-perspective、-webkit-perspective属性；
3、Safari仅支持-webkit-perspective属性；
4、Chrome支持perspective、-webkit-perspective属性。

注：当元素定义为perspective属性时，其子元素会获得透视效果，而不是元素本身。

理解：
perspective会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D视平面上，如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面上，并且变换结果中将不存在景深概念。
其实对于perspective属性，可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。为了更好的理解，我画了一张透视图，如下：

如有错误，还请道友指正，谢谢！