CSS transform（3D）的坐标轴及透视观察者

CSS transform 简介

CSS Transform效果是指通过在浏览器里让网页元素移动、旋转、透明、模糊等方法来实现改变其外观的技术。在CSS里定义的变化动作会在页面生成前应用到网页元素上，所以你看不到发生的过程。然而，这些变化动作也可以由mouseover或其它相似事件触发，这样我们就可以看到它的动作过程。

本文将详细介绍关于transform变形3D的内容，但需以了解transform变形2D为基础。3D变形涉及的属性主要是transform-origin、transform、transform-style、perspective、perspective-origin、backface-visibility

坐标轴

首先要先了解坐标轴。3D变形与2D变形最大的不同就在于其参考的坐标轴不同。2D变形的坐标轴是平面的，只存在x轴和y轴，而3D变形的坐标轴则是x、y、z三条轴组成的立体空间，x轴正向、y轴正向、z轴正向分别朝向右、下和屏幕外

透视

需要了解观察者、被透视元素和变形元素这几个概念。
　　首先是变形元素，顾名思义，就是进行transform3D变形的元素，主要进行transform、transform-origin、backface-visibility等属性的设置
　　观察者是浏览器模拟出来的用来观察被透视元素的一个没有尺寸的点，观察者发出视线，类似于一个点光源发出光线
　　被透视元素也就是被观察者观察的元素，根据属性设置的不同，它有可能是变形元素本身，也可能是它的父级或祖先元素(后面会详细介绍)，主要进行perspective、perspective-origin等属性的设置
　　
perspective
　　值: none |
　　初始值: none
　　应用于: 非inline元素(包括block、inline-block、table、table-cell等)
　　继承性: 无
　　[注意]透视perspective不可为0和负数，因为观察者与屏幕距离为0时或者在屏幕背面时是不可以观察到被透视元素的正面的
　　[注意]透视perspective不可取百分比，因为百分比需要相对的元素，但z轴并没有可相对的元素尺寸
一般地，物体离得越远，显得越小。反映在perspective属性上，就是该属性值越大，元素的3d效果越不明显。(就像离一个人很近，甚至可以看到他的毛孔；如果离一个人很远，可能只看到一个轮廓)