| 文章简介：这样也就可以解释为什么perspective为什么要放在transform的第一位了。 |
我觉得CCS3的transform中的学问很深，可以出不少面试题了，之前的文章谈到过perspective属性的位置问题，我们今天看看rotate的顺序，首先看看下面两个CSS3的keyframe动画：
两个动画的起始状态和结束状态都是是一摸一样的（其实就是原始位置），不同的只不过是rotate和rotateX的顺序。但是动画效果却有惊人的差别。
CSS代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
我看了mozilla的网站介绍，里面没有提到关于顺序的问题。于是我做了以下实验。
将两个同样的元素的style分别设置为：
|
1 2 3 4 5 |
|
结果是不相同的。如下图：
是不是-webkit-transform-origin设置的原因呢？我们将该属性删除：
我们将问题旋转的角度简化为45度和90度，为了让rotateX的效果明显现一些，我们增加perspective属性。两个CSS分别是：
|
1 2 |
|
这样我们就能发现一些规律了。就是rotate旋转的不是图像，（也不是寂寞）而是坐标系。具体来说，就是X轴也被旋转了。rotateX旋转的也是坐标系。
我们在图上添加坐标系大家就明白了。注意右面的图的坐标系顺时针旋转了90度。
我们再看一个个例子：
|
1 2 |
|
结论：rotate、rotateX、rotateY、rotateZ都是旋转坐标系。rotateX时，Y轴和Z轴的位置会变。rotateY时，X轴和Z轴的位置会变。rotate和rotateZ时，X轴和Y轴的位置会变。
我们使用rotate时要注意顺序，特别是动画的时候。
进一步的结论：用过canvas中transform的同学可能会知道，在canvas中进行transform时，变形的对象是canvas本身。看来在CSS3的transform中也是一样的道理。比如我想将图片旋转90度，浏览器的逻辑是，将页面旋转-90度，然后渲染图片，之后再将页面旋转90度。这样就实现了旋转图片的效果。
因此在CSS3的tranform属性中，perspective、rotate、translate等属性并不是代表对象的最终状态，而是浏览器渲染对象的“指令队列”。浏览器会依次执行这些“指令”。
这样也就可以解释为什么perspective为什么要放在transform的第一位了。
PS：以上结论是基于逻辑推理得来，本人没有看过这部分的浏览器源代码，请看过的同学指正。