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