4 ms·
Great article, but one nit: order of transforms matters, yes, but you’re supposed to read them right to left (like matrix multiplication). When you have `trans
by bobbylarrybobby 5y ago
Great article, but one nit: order of transforms matters, yes, but you’re supposed to read them right to left (like matrix multiplication).
When you have `transform: translateX(…) rotate(…);`, you’re saying “first rotate it about the origin, then translate it”. When you have `transform: rotate(…) translateX(…);`, you’re saying “first translate it, then rotate it about the origin”! — not the translated object’s origin! That’s why in the the second example the transformed object swings around the origin from a distance when you change the rotation angle.
I mean, sure, you can mentally do it left to right and track how the axes change, as the author did, but right to left is a lot simpler, and is what’s actually happening to the vectors behind the scenes.
- joshwcomeau 5y agoOh! This is a helpful insight, thanks. Updating the blog post.
- userbinator 5y agoYou can think of the transforms as function applications to more easily remember the order: translate rotate foo -> translate(rotate(foo)), i.e. do the rotation and then translate the result of it.