CSS3 transform多个属性值顺序不同，渲染结果不同的问题？

Question

做H5页面，对元素进行transform变换，如果transform有多个属性值，调整他们的顺序，渲染结果不一致。比如：

transform: scale(2) translate(100px,0px);
transform: translate(100px,0px) scale(2);

又比如：

transform:rotate(30deg) skew(30deg,0deg);
transform:skew(30deg,0deg) rotate(30deg);

这上面看上去一模一样的代码，渲染结果并不一致。如图：

线上测试地址：
https://codepen.io/quiettroja...

Answer 1

这个很显然是这样的啊。
比如你一个数先做加法运算再做乘法运输，反过来先做乘法运算再做加法运算，这两个结果能一样吗？

(3+2)*4=20 

(3*4)+2=14

 transform本质上也就是数学中矩阵的运算，也是有先后顺序的。

Answer 2

这是因为transform-origi转换原点改变了，可以试着统一下两者的转换原点