3D Transforms

Bending Space in the Third Dimension

Time to leave the flatlands, folks.

This is where our elements stop behaving like stickers and start acting like objects in actual space.

No animation yet — just posing, tilting, flipping, and revealing surfaces our UI never had before.

---

🎛 The 3D Tools

In 3D land, you’ll mostly use:

• translateZ() — move toward / away from the viewer
• rotateX() — tilt forward / back
• rotateY() — turn left / right
• rotateZ() — spin like 2D rotation
• perspective — the camera that makes depth visible

---

🪂 Perspective: the depth-maker

Here’s the rule:
Perspective goes on the parent, not the thing rotating.

It’s hard to maintain perspective from the inside.

.stage {
  perspective: 800px;
}

Without perspective, rotateX/rotateY look flat and kinda sad.

Our demo stage already has perspective baked in.

---

translateZ()

Push/pull an element along the Z axis.

Ghost = original plane. Solid = pulled toward you.

Near. Far. Don’t be fooled. It only looks like grover scaling.

.monkey {
  transform: translateZ(-120px);
}

---

rotateX()

Tilts around the horizontal axis.

Bottoms up, for positive degrees.

In perspective, this looks like a squish-squash.

.monkey {
  transform: rotateX(55deg);
}

---

rotateY()

Turns around the vertical axis — classic “card flip.”

If you’re positive, it happens right (side) away.

.monkey {
  transform: rotateY(-55deg);
}

---

rotateZ()

Spin in the flat plane.

Same effect as 2D rotate(), just part with the 3D family.

Watch out. These aren’t pushy, but they can obscure!

.monkey {
  transform: rotateZ(35deg);
}

---

🧩 Combine for Shape‑Shifting Goodness

3D transforms can be stacked the same way 2D transforms can:

.card {
  transform: rotateY(20deg) rotateX(10deg) translateZ(-30px);
}

Order still matters, but let’s talk origin story next.

---

➡️ Next page: Transform Origins — pivot like the pros.