css3 transform属性小探索

今天发现了transform属性的一个坑爹特性：
transform：rotateX(90deg) translateZ(100px);
transform：translateZ(100px) rotateX(90deg);
谁也没想到这两条只是顺序不同的写法，有着天大的区别，
我们知道rotateX（deg）与rotateY（deg），rotateZ（*deg）会将元素的坐标轴也一起旋转，
所以啊，问题就在这里了，
前面那种代码的写法表示：先进行绕x轴旋转90度，此时元素的坐标也一起旋转了90度，然后再在改变后的坐标系中沿着Z轴移动100px。
后面那种代码的写法表示：先沿着原坐标系中的Z轴移动100px；然后再绕x轴旋转90度，元素的坐标一起旋转了90度。
是的！这里有先后之分！
今天在这里纠结两个小时才把它拎出来，也是跪了。。。