Order your transforms

Transforms apply in order; use wrapper elements for another order.

Adam Wathan@adamwathan
@IvoElbert @markdalgleish I went with scale -> rotate -> translate since that's the order they taught me to do things in in my graphics programming classes in college. Worst case scenario though you can use extra wrapper elements to manually control the order 👍🏻
Dec 16, 2020View on X ↗
Adam Wathan@adamwathan
Anyone use `skew()` enough in your CSS that you've codified your "skew scale" into your design system? So far Stripe is the only example I've found that really uses it, and their entire scale is ['12deg'] 😅 Would love to see what values you're using and why ❤️
Dec 22, 2019View on X ↗

Demo uses fixed values: scale 1.3, rotate 30deg, translate 60px, skew 12deg.

Reach the dashed outline

Reorder the chips until the box meets the outline.

Fixed default orderBad
A
Wrapper per functionGood
<!-- one function per element, outermost first -->
<div class="translate-x-15">
  <div class="rotate-30">
    <div class="scale-130 skew-x-12">A</div>
  </div>
</div>

/* same as transform: translate() rotate() scale() skew() */

Why it matters, pros and cons

Why it matters

Each function moves the coordinate space for the next, so order changes the result. Pick one default and wrap for the rest.

Pros

  • One fixed order is predictable across every element.
  • Wrappers give any other order with no new API.
  • Each layer stays a single, readable function.

Cons

  • Extra elements add markup and can affect layout.
  • If order matters a lot, write transform by hand instead.
  • Nested transforms are harder to animate as a group.