Order of transformations seems weird / inconsistent

[RXminuS]

Right now transformations are applied by

transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))

meaning an object is first scaled and rotated before it is translated as per these MDN Docs

The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left.

However, that creates some really awkward defaults where simply because if I have translate-y-2 and scale-80 it won't actually translate 0.5rem rather 0.5rem * 80% rem (note that the 0.8 is even relative to parent size because it's a percentage scale making it even weirder)

Similarly, weird results will happen by applying the rotation before translation. I think better defaults would make things nicer in this case (but probably in 3.0.0 since it would be breaking) but maybe there's a case for making it configurable/class-based where you can have different orders of application?

[adamwathan]

Hey! In my tests things work the way it sounds like you want, scale-80 translate-y-2 does translate by 0.5rem, not 0.4rem.

Here's a Play that demonstrates it:

https://play.tailwindcss.com/V2QfJMX2w9

The order was chosen based on how this is normally done in graphics programming to try and make things intuitive as you've hinted at:

https://gamedev.stackexchange.com/a/16721

If we translated before scaling, then the translation amount would be scaled, but we translate last to make sure we are translating by the expected amount.

[RXminuS]

Is there differences between browsers in that case?! Could you share what your transform class looks like when looking at it with inspector? Because mine does actually have the items in reverse applied order (consistent with the behaviour that I'm seeing).

Is there anywhere specific in the code where this order is determined, from a quick glance it just seemed to be be the loading order of the respective core-plugins, but maybe I'm missing something.

Yeah completely get the graphics programming order, that's my background :-D But that's specifically why I found it so confusing that they were applied in a different order. I'll see if I can make a minimal replication somewhere