transform顺序浅谈

有用过transform的小伙伴们可能都会遇到一些问题，发现transform得到的结果往往不是我们所想的

例如scale(2,1) rotate(30deg) ,我们预想的结果是一个先放大的元素，然后旋转30度，结果应该是一个没有变形的元素，但是显示很残酷：

理想：

----------------变成--------------------》》》

---

 

实际：

----------------变成--------------------》》》

实际上变形了，这是为什么呢？因为scale后再rotate，x轴和y轴转过的角度就不同了，所以我们就先rotate再放大就不会变形了

因此理想的写法是：

transform: scale(2,1) rotate(30deg);

实际上的写法是：

transform: rotate(30deg) scale(2,1);

---

不同的是css3变形是根据元素自己的坐标轴，而canvas和svg变形都是根据画布左上角的坐标轴。

---

 

ps:之前听过说变换顺序是倒着来的,其实种说法是站在坐标轴不变的情况下理解的

但我觉得更好的理解是坐标轴跟着变换了而不是顺序从后往前（而scale后坐标轴的变换会变得很奇怪，例如scaleX(2)后再translateX(30px)，最后translate居然发生了60px）