Transform Origins

The point from wence transformation occureth

Transforms don’t just happen — they pivot from a specific point.

Move that pivot, and the entire motion changes character.

---

Top Origin — hinge forward

Pivot at the top → classic dropdown hinge.

.monkey {
  transform-origin: top center;
  transform: rotateX(45deg);
}

---

Left Origin — door swing

Pivot on the left → perfect for card reveals.

.monkey {
  transform-origin: center left;
  transform: rotateY(-45deg);
}

---

Bottom-Right Origin — dramatic spin

Pivot in the corner → dramatic motion with minimal rotation.

.monkey {
  transform-origin: bottom right;
  transform: rotateZ(25deg);
}

---

Keyword Origins

You can also use keywords:

transform-origin: top left;
transform-origin: bottom center;
transform-origin: right;

---

➡️ Next page: Assemblies — combining transforms in an orderly fashion.