CSS3的3D变换

CSS3 变换也叫 2D/3D转换，主要包括以下几种： 旋转 ( rotate ) 、 扭曲 ( skew ) 、 缩放 ( scale ) 和 移动 ( translate ) 以及 矩阵变形 ( matrix ) 。
3D变换涉及到的四个属性:
perspective 设置舞台元素（变换元素的父元素），理解为人到舞台的距离。
transform-style (设置在父元素)控制子元素是在二维平面还是三维空间。
transform-origin 作用在变换元素上，控制变换的基点（坐标原点）。
backface-visibility 作用在变换元素上，指示变换元素旋转180度背面是否可见。

透视perspective: number|none;
perspective 属性是3D变换最重要的属性，定义 3D 元素距视图的距离，即设置查看者的位置，可理解为物体距你的距离，以像素计。该属性的存在与否决定了你看到的是2D还是3D，没有透视，为2D。
perspective取值为none或不设置，就没有真3D空间。
perspective取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D。
perspective的值无穷大，或值为0时与取值为none效果一样。
perspective是针对父元素的，设置人眼与父元素间距离。

透视基点 perspective-origin: x-axis y-axis;
主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置，在该位置观看者好像在观看该元素的子元素。

x-axis：定义该视图在 x 轴上的位置。默认值：50%。
可能的值：left、center、right、length、%
y-axis：定义该视图在 y 轴上的位置。默认值：50%。
可能的值：top、center、bottom、length、%

**呈现样式transform-style: flat | preserve-3d; **
其中 flat 值为默认值，表示所有子元素在2D平面呈现。 preserve-3d 表示所有子元素在3D空间中呈现。
preserve-3d ，它表示不执行平展操作，他的所有子元素位于3D空间中。
transform-style 属性需要设置在父元素中。

transform-origin：x，y;
用来设置变换基点的属性
transform-origin属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。默认值为50%,50%,0。

backface-visibility：hidden|visible;
hidden:背面不可见，元素在3D环境下渲染上下文，将根据3D变形矩阵来计算;
visible:背面可见，元素不在3D环境下渲染上下文，将根据2D变形矩阵来计算。