css Transfrom属性顺序问题： rotate() scale() 顺序不同导致效果不同

今天解 bug 时发现 transform 属性值的顺序会导致不同的效果。

例如：

.div1 {
  transform: scale(0.5, 1) rotate(45deg);
}
.div2 {
  transform: rotate(45deg) scale(0.5, 1)
}

上面的两个属性仅仅是调换了位置，却程现了不同的显示效果。

写了一个 codeopen 的 demo。

查阅后才发现，scale() 是对水平轴和垂直轴进行缩放，而 rotate() 会改变轴的方向。因此如果先旋转再进行缩放，如果 scale(x, y) 中的 x 和 y 的值不一致，则会导致一个变形的效果，也就是下面红色方块的样子。使用 translate(x,y) 同理。

因此，以后使用 transform 属性值时需要格外注意这个顺序，rotate() 尽量放在最后。