css3中perspective属性

简介：

perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。参数取值：指定观察者距离「z=0」平面的距离，为元素及其内容应用透视变换。不允许负值，none：不指定透视，我们一起来了解一下。

perspective：800px 就是人离屏幕800px 的地方观看这个div元素。

perspective这个属性不是很好的观看效果，可以根据它与translateZ来一起观看其效果，因为时z轴移动，它可以给人一种觉得一个div中的图片离里越来越近。

首先具体代码：

注意：这时我们的translateZ(0px)没有移动，body中也设置了 perspective: 800px;，perspective只能设置在元素的父级中。
开始设置的效果：

很普通的一张图片，当我们来调translateZ移动的大小时，可以观看图片的具体变化。当translateZ(500px)时，效果为：

当translateZ的大小临近与800px时，效果为：

这时图片离我们越来越近了，当它大于800px时，这个图片就消失了。

这是我们把translateZ的值调整为负数时，看其效果。

反之当translateZ为负值时，我们可以看到图片变小了，也就是图片离人越来越远了。

这时为什么perspective为800px，translateZ(0px)时，图片大小没有变化呢，如果调整perspective的大小又是什么效果呢？

这时图片并没有什么变化。

得出结果：
translateZ 的值越大，图片越大。


translateZ 的值越小，图片越小。

translateZ(0px)的时候，perspective值变大，图片没有变化。是因为图片没有移出div屏幕外面，所以图片没有什么变化。