transform-origin

transform-origin sets the pivot/reference origin for transforms. Rotating around the center and around a corner produces visibly different paths.

Compare center and top-left pivots

Both squares rotate 30 degrees. The outlined holders show their original positions; only the origin differs.

<p>Center</p>
<div class="stage">
  <div class="holder"><div class="square center">A</div></div>
</div>
<p>Top left</p>
<div class="stage">
  <div class="holder"><div class="square corner">B</div></div>
</div>

.stage {
  padding: 2rem;
  background: #eff6ff;
  margin-block: 1rem;
}
.square {
  width: 70px;
  height: 50px;
  background: #2563eb;
  color: white;
  display: grid;
  place-items: center;
}
.holder {
  width: 70px;
  height: 50px;
  outline: 1px dashed #172554;
}
.square {
  transform: rotate(30deg);
}
.center {
  transform-origin: center;
}
.corner {
  transform-origin: left top;
}

Scale from the inline-start edge in this LTR example

Left center anchors the left edge while width grows visually toward the right. It is a physical keyword, so choose another rule when direction needs a different pivot.

<input class="grow" id="grow" type="checkbox" /><label for="grow"
  >Grow from the left</label
>
<div class="stage"><div class="square">Scale</div></div>

.stage {
  padding: 2rem;
  background: #eff6ff;
  margin-block: 1rem;
}
.square {
  width: 70px;
  height: 50px;
  background: #2563eb;
  color: white;
  display: grid;
  place-items: center;
}
.square {
  transform-origin: left center;
}
.grow:checked ~ .stage .square {
  transform: scaleX(1.8);
}

Values and defaults

For ordinary HTML boxes, the initial origin is 50% 50% 0 and the property is not inherited. Most SVG elements have different initial origin behavior, so inspect their reference-box rules separately. One horizontal value leaves the other axis centered; a top/bottom keyword selects the vertical axis with horizontal center. Two positions set x/y, and an optional third length sets z.

Horizontal/vertical percentages use the transform reference box’s dimensions. The z value must be a length, never a percentage. Origins outside the box are allowed. Transform-box controls which reference box is used.

Common mistakes

A single value does not set both coordinates to that value. Changing origin does not move the element’s normal layout box. A pure translation has no pivot-dependent rotation/scale effect to reveal. A later transform declaration does not reset transform-origin.

Learn transform, rotate, and scale.

Sources and browser support

MDN: transform-origin describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.