transform-origin Explained

What transform-origin Controls

Every transform - a rotation, a scale - happens around a fixed reference point. By default, that point is the exact center of the element. transform-origin lets that reference point be moved somewhere else.

The Default: Center

.box {
  transform: rotate(45deg);
  /* equivalent to transform-origin: center center; (the default) */
}

Rotating Around a Corner Instead

.box {
  transform-origin: top left;
  transform: rotate(45deg);
}

With the origin moved to the top-left corner, the same rotation now swings the box around that corner instead of its center - visually very different, even though the rotation angle is identical.

Why This Matters for Scaling Too

.tooltip {
  transform-origin: bottom center;
  transform: scale(0);
  transition: transform 0.2s ease;
}
.tooltip.visible {
  transform: scale(1);
}

Setting the origin to bottom center makes a tooltip appear to grow upward from its anchor point, rather than expanding outward from its own center - a small detail that makes an animation feel intentional rather than generic.

Accepted Value Formats

A Practical Tip

When an animation feels like it is rotating or scaling from an unexpected or awkward point, checking transform-origin first is often the fastest way to diagnose it.