css里的3d理念
使用css3的3d transform，就可以在平面的网页里添加炫酷的三维视觉效果，这很令人愉悦。
需要注意的是，3d transform只是css的一部分，它并不是一个三维引擎（3d engine）。三维引擎一般是这样的（游戏引擎Unity3D）：
包括JavaScript 3D库 three.js在内，简单来说，它们这些可以称为三维引擎的，都会包括：
独立的三维坐标系统。
几何图形和材质贴图。
光照和摄像机。
3d transform和它们相比起来，是缺少这些内容的。毕竟，css的关注点是网页样式，而不是创建虚拟空间。
尽管3d transform的三维空间能力有所不足，但它仍然可以创建出很棒的三维效果。这就需要我们开发者来用心了。
在下面的内容开始之前，如果你还对 perspective等3d transform相关的css属性完全不了解，可以阅读我以前写的 css三维变换的文章。
3d transform的坐标系统
我们很熟悉的网页是平面的，一个DOM元素，比如一个
，它会有一个 初始坐标系 （ initial coordinate system ）：
每一个DOM元素都有一个这样的初始坐标系。其中，原点位于元素的左上角，z轴指向观察者（也就是屏幕外的我们）。初始坐标系的z轴并不算是三维空间，而是像 z-index那样作为参照，决定网页元素的绘制顺序，绘制顺序靠后的元素将覆盖绘制顺序靠前的。
在使用transform的时候，情况则有所不同。transform所参照的并不是初始坐标系，而是一个新的坐标系：
transform所用的这个坐标系，相比初始坐标系，x、y、z轴的指向都不变，只是原点位置移动到了元素的正中心。如果想要改变这个坐标系的原点位置，使用 transform-origin。 transform-origin的默认值是 50% 50%，因此，默认情况下，transform坐标系的原点位于元素中心。
transform的顺序
我们都可能像 transform: rotateY(45deg) translateX(100px);这样使用多个变换函数。这种时候，需要意识到变换函数的顺序。这是因为， 每一个变换函数不仅改变了元素，同时也会改变和元素关联的transform坐标系，当变换函数依次执行时，后一个变换函数总是基于前一个变换后的新transform坐标系。
例如，下面一个包含两个变换函数的transform的效果（gif）：
如果交换这两个变换函数的顺序，是这样的效果：
可以看到，由于坐标系会随着每一次变换发生改变，因此不同顺序的情况下，元素最终的位置也不同。
对此还有一种解释，即变换函数是通过数学上的矩阵乘法运算完成的，而矩阵的乘法是不满足交换律的。任意坐标空间内的变换函数或者变换函数的组合，都可以转换为一个矩阵（还有一个 矩阵小工具可以帮你做这个转换）。
创建三维物体
前面已经提到，3d transform并没有像三维引擎那样为你创建三维场景提供全面的资源。因此，就以创建一个三维物体来说，我们只能利用网页目前已有的内容，自己想办法。
在网页里，你并不能直接定义一系列坐标为 (x, y, z)的空间中的点，然后基于这些点来生成三维图形。网页里有的，是平面图形。不管是
还是其他html元素，它们都是平的，没有厚度，像纸片一样。但纸片就可以搭东西，所以，一个DOM元素用作三维物体的一个“面”，把这些“面”有序地组织起来，得到的就是三维物体了！
事实上，在三维引擎里，三维物体也不是实体，它们都是由一系列平面（多边形）所围成的（并可以在平面上添加纹理和贴图）。
正方体
现在来做一个正方体，现在先不用考虑perspective。正方体有六个面，然后需要用一个元素来装这六个面，所以html是：
1
查看更多关于3dtransform的坐标空间及位置_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did113905