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本质上也就是数学中矩阵的运算，也是有先后顺序的。