How does transform-origin change the result of a CSS rotation?

The rotation can change where the element appears, even when you haven’t changed its layout position. The key is the pivot: transform-origin sets the point around which the transform is applied. For ordinary CSS elements, the default pivot is the center, written as 50% 50% 0. The browser effectively shifts the origin, rotates, then shifts back; changing the origin therefore changes the element’s visual position as it turns. [S1]

Think of the element as a card pinned to a board. Rotate it around its center and it swings around that center. Pin it at a corner and that corner stays put while the rest swings around it.

Assume a 200-by-100-pixel element whose top-left is at coordinate (0, 0). Its center is (100, 50). The diagram shows the two possible pivots:

Element before rotation (200 × 100)

(0,0) A--------------------
      |          C (100,50) |
      |                     |
      ---------------------- B (200,100)

A = top-left corner     C = center

With transform-origin: 50% 50%, C is the pivot. With transform-origin: 0 0, A is the pivot. For a 90-degree rotation, the element turns around whichever point is selected; the center-pivot and corner-pivot versions therefore trace different paths and have different visual placements. Percentages are relative to the element’s reference box. [S1][S2]

This diagram identifies pivots, not exact screen coordinates after rotation. The final coordinates depend on the element’s position and its surrounding layout.

Give both elements the same dimensions and rotation, then change only the origin. For a quick visual comparison, place them in separate spaces or inspect them one at a time:

.center-pivot {
  width: 200px;
  height: 100px;
  transform-origin: 50% 50%;
  transform: rotate(90deg);
}

.corner-pivot {
  width: 200px;
  height: 100px;
  transform-origin: 0 0;
  transform: rotate(90deg);
}

The first rotates around its center; the second rotates around its top-left corner. Keep the angle and dimensions identical so the origin is the only changed variable. The CSS transforms specification describes the same shift-origin, apply-transform, shift-back calculation, and explains why changing the origin changes the visual path and placement. [S2]

Choose the point that should appear to hold still while the element turns. Use the center for a spin around the element’s middle, or a corner or edge when the motion should swing around that point. Then set the origin explicitly and check the result in its actual layout; the pivot tells you how it rotates, but it doesn’t guarantee a particular final screen position.

A reusable note for a design or code review could be:

Element: [selector or component]
Rotation: [angle]
Pivot: [center, top-left, or other point]
CSS origin: [for example, 50% 50% or 0 0]
Expected fixed point: [point that should stay in place]
Check: compare with the same element and angle using the default center origin

For ordinary CSS elements, origin percentages refer to the reference-box dimensions. SVG elements can have different initial-value behavior in some cases, so this center-versus-corner example should not be assumed to describe every SVG setup. The cited material establishes how the origin affects the pivot and visual path; it does not establish exact placement for every layout or SVG case. [S1][S2]