Transform origin
The pin a transform moves around: center for a spin, edge for a hinge, or a corner for something that unfolds.
See it
What it is
Transform origin is the pivot that CSS transforms act around. It defaults to the element's center, which is why 'rotate()' looks like a pin through the middle and 'scale()' grows equally in every direction. Set 'transform-origin: left center' and the same element swings or grows from its left edge instead.
Reach for it when the motion has a physical attachment point: a menu opening from its trigger, a card flipping on one edge, a clock hand turning around its base, or a tooltip scaling from its arrow. Named positions are readable, while percentages and lengths give precise control, including points outside the element.
Gotcha: changing the origin changes the path of every transform in the list, not just rotation. An off-center scale also moves the element's visible edges, which can look like an accidental slide. For SVG, 'transform-box' decides which box percentages and keywords measure against, so set it explicitly when the pivot must match the drawn shape.
Ask AI for it
Make this menu open from the point where it touches its trigger. Set 'transform-origin: top right', then transition from 'transform: scale(0.96) translateY(-4px); opacity: 0' to 'transform: scale(1) translateY(0); opacity: 1' over 200ms with cubic-bezier(0.22, 1, 0.36, 1). Keep the transform functions in the same order in both states, and set 'transform-box: fill-box' if the target is SVG so the pivot is measured from the painted object. Under 'prefers-reduced-motion: reduce', drop the transform and use a 120ms opacity-only transition.