目录[1]坐标轴 [2]透视 [3]变形函数 [4]透视函数 [5]变形原点 [6]背景可见 [7]变形风格前面的话
本文将详细介绍关于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轴正向分别朝向右、下和屏幕外
透视
透视是transform变形3D中最重要的内容。如果不设置透视，元素的3D变形效果将无法实现。
//下面以rotateX()旋转函数为例，rotateX(45deg)表示元素以X轴方向为轴沿顺时针旋转45角度//左图是无变形和透视样式的原始效果，中图是设置变形和透视样式的效果，右图是设置变形但未设置透视样式的效果
由以上三个图可说明，如果不设置透视，那么浏览器会将元素的3D变形操作投射垂直到2D视平面上，最终呈现出来的只是元素的宽高变化
要深入了解透视，需要了解观察者、被透视元素和变形元素这几个概念。
首先变形元素，顾名思义，就是进行transform3D变形的元素，主要进行transform、transform-origin、backface-visibility等属性的设置。
观察者是浏览器模拟出来的用来观察被透视元素的一个没有尺寸的点，观察者发出视线，类似于一个点光源发出光线。
被透视元素也就是被观察者观察的元素，根据属性设置的不同，它有可能是变形元素本身，也可能是它的父级或祖先其元素(后面会详细介绍)，主要进行perspective、perspective-origin等属性的设置
透视距离
透视距离perspective是指观察者沿着平行于z轴的视线与屏幕之间的距离，简称视距
值: none | <length>
初始值: none
应用于: 非inline元素(包括block、inline-block、table、table-cell等)
继承性: 无
[注意]透视perspective不可为0和负数，因为观察者与屏幕距离为0时或者在屏幕背面时是不可以观察到被透视元素的正面的
[注意]透视perspective不可取百分比，因为百分比需要相对的元素，但z轴并没有可相对的元素尺寸
