三维坐标轴html实现,CSS3三维变形，其实很简单！

原标题：CSS3三维变形，其实很简单！

本文主要内容一、前言二、坐标轴系统三、透视与变形风格四、3D变形函数五、实例展示六、总结一、前言

所谓的三维变形，无外乎就是在二维平面的基础上进而实现三维立体空间的形变。上两周我们详细的讲解了二维变形的相关操作，本文将详细的介绍关于transform3D变形的内容，但是仍然以2D变形为基础。期中3D变形还涉及到的属性有transform、transform-style、perspective。

二、坐标轴系统

在了解其他相关的操作之前，首先要了解的是三维坐标系统。3D变形与2D变形的最大不同就在于其参考的坐标轴不同，2D变形的坐标轴是平面的，只存在X轴和Y轴，而3D变形的坐标轴则是X、Y、Z三条轴组成的立体空间，X轴正向是朝右，Y周正向是朝下，Z轴正向是朝屏幕外。如下图：

三、透视与变形风格

1、透视perspective

透视是transform变形3D中最重要的内容。如果不设置透视，元素的3D变形效果将无法实现。为此需要使用到这样的一个属性——perspective。

perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到一个视面上，继而投到一个2D视平面上。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念。

上面的描述可能让人难以理解一些，其实对于perspective属性，可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。

其取值的情况如下：

透视perspective不可为0和负数，因为观察者与屏幕距离为0时或者在屏幕背面时是不可以观察到被透视元素的正面的。