Transform Assemblies

Order Up!

Single transforms? Cute.

Assemblies are where motion becomes expressive — stacking transforms in sequence unlocks complex, cinematic motion (when done right).

The Golden Rule to Ordered Rule:

Transform sequence matters, a lot.
CSS applies transforms left → right, each one rewriting the coordinate system for the next.

Same transforms.
Different order.
Completely different geometry.

---

Scale → Rotate

We squash the monkey vertically first,
then rotate the newly-squished geometry.

scaleY happens first → rotation uses the already-squashed shape.

.monkey {
  transform: scaleY(0.5) rotate(45deg);
}

---

Rotate → Scale

Now we rotate the original monkey first,
then squash along the monkey’s new rotated Y axis.

rotate happens first → scaleY squashes along the rotated axis.

.monkey {
  transform: rotate(45deg) scaleY(0.5);
}

---

📘 Why order matters — in CSS space

🧠 Transforms rewrite space

Each transform produces a new coordinate grid.
Every transform after that uses the new, warped grid — not the original one.

This is why:

• scaleY(0.5) rotate(45deg)
  ≠
• rotate(45deg) scaleY(0.5)

Transforms are matrices, and matrix multiplication is NOT commutative.

Think of transforms like:

• moving and stretching rubber sheets
• where each action warps the space the next action happens inside

That’s why your rectangle stops looking like a rectangle when you reorder scale + rotate.

---

🎯 Take it away, space monkey!

Transforms don’t commute.
You decide the narrative:

1. What shape should it be first?
2. What orientation after that?
3. What final motion completes the move?

That’s motion design, and the law of the jungle.

---

➡️ Next page: From A to B — Transition to Ion Drive.