The transform-origin property sets the pivot point for an element’s transforms. For rotate, it is the center of rotation. For scale and skew, it is the fixed point the transform grows from.
The default is the element’s center (50% 50%). You can move it with keywords (top, left, …), lengths, or percentages. It only has a visible effect when a transform (or individual transform property) is applied. It is not inherited.
Not deprecated. Cross-browser since about September 2015. Safe for everyday 2D transforms.
Use top left (or similar) when a card or icon should swing from a corner instead of spinning in place.
transform-origin: [ <length-percentage> | left | center | right | top | bottom ]{1,2} <length>? | initial | inherit;1 value = horizontal (or a single keyword like top). 2 values = x then y (or keyword pairs like top left). 3 values = x, y, then a length for the z offset (3D).
| Value | Description | Try it |
|---|---|---|
center | Default pivot — middle of the element | Try it |
top left | Pivot at the top-left corner | Try it |
bottom right | Pivot at the bottom-right corner | Try it |
| Lengths | Absolute offsets such as 50px 20px | Try it |
| Percentages | Relative to the element box, such as 0% 50% | Try it |
right top | Keyword order can be y then x for keyword pairs | Try it |
transform-originPick a pivot, then apply a transform so you can see it.
rotate() or scale()) with transform.transform-origin to the point that should stay fixed.The blue box is rotated 45deg. Change only transform-origin and watch how the pivot moves.
Each snippet uses rotate(45deg) so the origin is easy to see. Use Try It Yourself for a live editor.
The default pivot — the box spins around its middle.
<style>
.box {
transform: rotate(45deg);
transform-origin: center;
}
</style>
<div class="box">Box</div>rotate(45deg) turns the box.center is the same as 50% 50%.transform-origin looks the same.Rotate around a corner so the box swings from that point.
<style>
.box {
transform: rotate(45deg);
transform-origin: top left;
}
</style>
<div class="box">Box</div>45deg — only the origin changes.top left pins the pivot to that corner.Percentages are relative to the element’s own width and height.
<style>
.box {
transform: rotate(45deg);
transform-origin: 0% 50%;
}
</style>
<div class="box">Box</div>0% 50% matches a left-edge midpoint pivot.If the pivot looks wrong, one of these is usually why.
transform-origin alone does not move the element. Pair it with transform, rotate, scale, or similar.
A pure translate() moves the whole box the same way. Origin mainly matters for rotate, scale, and skew.
50% is half of the element’s own width or height — not the parent’s size.
top left and left top both work for keyword pairs. With two lengths or percentages, the order is always x then y.
The optional third value is a length only (for example 20px). Percentages are not valid for the z offset.
transform-origin is a browser CSS property for transform pivots. Node.js, Deno, and Bun do not apply it.
Chrome 36+, Firefox 16+, Safari 9+, Edge 12+, IE 9+. Widely available since September 2015.
Bottom line: Safe for modern and older sites that support CSS transforms. It is not a runtime API.
50% 50% (center of the element).One line: transform-origin sets where rotate and scale pivot — default is center.
Learn how nested elements keep a 3D transform context.
8 people found this page helpful