Making a menu spin open from a button, or having an image grow from its bottom corner instead of its center: these effects, common on modern interfaces, all rely on a single property, transform-origin. Without it, every rotation or scale would always happen from the element's center, which is not always the effect a designer is after.
transform-origin always works alongside transform: on its own it produces no effect at all, it simply moves the point around which the transformation applied by transform will play out.
Definition
transform-origin sets the fixed point, expressed as two or three coordinates, that a rotation, a scale or a skew pivots around. By default, that point sits exactly at the center of the element's box, equivalent to 50% 50%. Moving it means choosing a new pivot: a corner, an edge, or even a point outside the element entirely.
.menu-icon {
transform-origin: top left;
transform: rotate(90deg);
}Syntax and accepted values
The property accepts keywords (top, bottom, left, right, center), percentages, length units like px or rem, or a combination of the first two axes followed by a third value for depth in a 3D context.
| Value | Pivot position |
|---|---|
center (default) | Exact center of the element |
top left | Top-left corner |
bottom right | Bottom-right corner |
0 0 | Top-left corner, as coordinates |
On an element whose width differs noticeably from its height, like a wide rectangular button, keeping the origin at its default center is enough in the vast majority of cases: moving it only really matters for specific effects, where the motion needs to look like it comes from one particular spot in the interface.
A concrete use case: a menu unfolding from a button
A dropdown menu that appears under a button feels far more natural if it grows from that button rather than from its own center. Placing the origin at the top of the menu, right below the button, makes the scaling effect look like the menu is literally springing out of the button that opened it.
.menu {
transform-origin: top center;
transform: scale(0);
transition: transform 0.15s ease-out;
}
.menu.open {
transform: scale(1);
}The default-center pitfall
The most common mistake is animating a rotation or a scale without ever touching transform-origin, then being surprised that the element seems to drift on its own during the animation. That apparent drift simply comes from the transformation running from the center, while the intended effect assumed a different pivot, often a specific corner or edge.
transform-origin setting follows directly from that question.transform-origin in three dimensions
In a 3D transform context, transform-origin accepts a third value for depth along the Z axis, which lets the pivot sit not just within the element's flat plane but also in front of or behind it.
Frequently asked questions
transform-origin work without the transform property?No, transform-origin only sets a reference point: without an active transformation through transform, such as a rotation or a scale, it has strictly no visible effect on the page.
Yes, transform-origin accepts any coordinate, including negative values or ones beyond 100%, which places the pivot outside the element's visual boundaries, a setting useful for simulating a pendulum or a door swinging on a hinge outside its own box.
In practice, no: transform-origin is not meant to be animated directly, it gets set once before the transformation triggers, and it is transform, paired with transition or a CSS animation, that produces the actual motion around that fixed point.