浅析css关于transform多参数执行顺序问题

　　查了一下MDN，上面说的就很直接：

要应用的一个或多个CSS变换函数。 变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。

1、实例验证

　　一方面说明顺序从左到右，另一方面要结果相乘，什么意思呢？验证一下：

　　transform: translateX(200px) scale(2);  等价于先 transform: scale(2);  然后  margin-left: 200px;

　　而我们换个位置：transform: scale(2) translateX(200px); 等价于先 margin-left: 400px; 再 transform: scale(2);

　　再看下这个：transform: scale(0.2) translateX(200px); 最后就是偏移了 40px，需要做一个乘积

　　再看下：transform: translateX(100px) rotate(30deg)，相当于先旋转 30deg，再向右移动 100px

　　那么我们反过来：transform: rotate(30deg) translateX(100px); 是先右移 100px，然后再旋转 30deg 吗？我们看 90deg 更好理解：

（1）先旋转 90deg，再右移 100px，是这样

　　而多参数复合效果的话，是这样的：

　　所以说需要注意的一点是：需要注意从左到右的顺序相乘，也就是说 margin-left 的 250px，经过 rotate(90deg) 之后，你要单步理解的话，实际上就变成了 margin-top 的 250px

2、结论理解

（1）transform动画执行的顺序是从最外面的属性开始，例如：transform:translateX(100px) rotate(30deg)，动画先旋转30度，然后再偏移100像素。

（2）如果调换过来，transform:rotate(30deg) translateX(100px)，动画先偏移100像素，然后再旋转30度，这里要注意，先偏移再旋转，旋转时会根据原来位置的中心点旋转

（3）注意：这里是分析的时候一步一步的计算，但实际执行的时候，几个变换表现上是同时进行的