css3 perspective 属性

上完了慕课上的“十天精通css3”课程，课程里没有讲解perspective 属性，
但是编程练习里却有用到的这个属性，所以就自己找资料了解了一下，算是对这个课程的一个补充吧！
首先看了张鑫旭老师的教程（http://www.zhangxinxu.com/wordpress/?p=2592）
我看完一头雾水，一篇图片比代码还多的讲解，对关键的地方举个关联性不强的例子带过，对小白而言实在难懂。
perspective属性需要与rotateX()，rotateY()，rotateZ()这三个属性配合着用，所以我们先从这三个属性入手。
rotateX()：让元素绕着一条穿过其中心（这里的中心点是指元素变形之前的中心点）的水平直线旋转,下图是将div2绕x轴旋转45度

rotateY()：让元素绕着一条穿过其中心（这里的中心点是指元素变形之前的中心点）的竖直直线旋转，下图是将div2绕Y轴旋转45度

rotateZ()：让元素绕着一条穿过其中心（这里的中心点是指元素变形之前的中心点）且垂直于显示屏的直线旋转，下图是将div2绕Z轴旋转45度

另一种代码写法：http://www.zhangxinxu.com/study/201209/transform-perspective-two-write-style.html
那么为什么div2绕x轴和y轴旋转形状被改变了，而沿着z轴旋转没有发生形变，依然是个正方形呢？
这就和perspective有关了，perspective翻译过来就是透视的意思了，学过透视原理的同学知道，透视有基本的三种：一点透视，两点透视，三点透视。
一点透视就是只有一个灭点，两点透视有两个灭点，三点透视则有三个灭点。
什么是灭点呢？

各边的延伸线所产生的相交点就是灭点，举个生活中的例子，我们看铁轨在远处离的越来越近，直到最后两边好像要相交在一起，这个点就是灭点了。

说了这么久的透视与灭点，是因为perspective就是用来确定元素透视灭点位置的，我们以上面绕X轴旋转为例，例子中perspective的值为150px；

把perspective的值改为100px后：

我们看到perspective的值越大灭点与元素的中心点之间的距离越大，元素的变形就越小；
相反perspective的值越小灭点与元素的中心点之间的距离越小，元素的变形就越大；
说到这里还没有解答为什么绕Z 轴旋转元素没有变形，因为在透视原理里面，垂直于我们的视线（视线可以理解为从我们的眼睛发射出的一道激光）的平面不会发生形变。
虽然不会发生形变，但是透视还有个近大远小的特性，这个时候就轮到translateZ属性登场啦，这个translateZ就是控制元素在Z轴上的远近的，而且需要与perspective属性配合着用才行


对比上面两张图，
我们先假设你坐在显示屏前，垂直盯着这个红色方块的中心点不动，那么你的视线就与这个方块的Z轴是重合的，你的眼睛就在这个红色方块的Z轴上，
当translateZ的值是0 的时候，在Z轴上元素在它本来的位置，也就是说没有相对于我们的眼睛的位置变化，所以既没有变大也没有变小，显示结果宽高都是原本的150px；
当translateZ的值是50时，我们看到元素变大了！这就是说元素在Z轴的位置变化了，它距离我们眼睛的位置减小了50px，所以距离减小元素变大了。
在上面假设的场景里面，perspective的值其实代表着你的眼睛与红色方块中心点的距离，所以当translateZ的值越来越大，越来越接近perspective的值时，红色方块会越来越大，当translateZ的值大于等于perspective的值时，红色方块就看不见了，因为它已经跑到我们假设的眼睛位置后面去了。

就讲到这里了，大家自己多试试，再结合张鑫旭老师的教程看看，应该就能明白了，就酱！