Skip to content
AITroveRead. Build. Understand.
Reading list
Make this comfortable

CSS transform-origin: move a visual pivot without moving the layout box

Last updated: 5 Oct 20265 min read
tutorial
BeginnerBy AITrove Editorial

Transform-origin sets the point around which a transform is applied. The transformed pixels can move, but the element's original layout box continues to occupy its normal space.

When to use it

A disclosure control rotates a small chevron when its details open. Centering the pivot inside the icon avoids a lopsided sweep; it does not change the button's label or accessible expanded state. Keep the icon decorative and let the HTML control carry the interaction. The sample uses a data state on the component, which an application must keep in sync with the disclosure's real state. Test the open and closed state at high zoom and with motion reduction enabled. Do not rotate the full text label merely to make the chevron appear animated. If the icon's hit area feels too small, enlarge the button's padding; transform-origin cannot enlarge a target or alter layout spacing.

css
.case-disclosure__chevron { display: inline-block; transform-origin: center; transition: transform 160ms ease; }
.case-disclosure[aria-expanded="true"] .case-disclosure__chevron { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .case-disclosure__chevron { transition: none; } }

Cost and verification

A small transform is usually cheap to animate, but large transformed surfaces may trigger compositing and repaint costs that need measurement. The declaration has no ability to fix a broken disclosure implementation. Because transforms do not reflow neighboring content, a wide rotation can overlap nearby labels; leave adequate space. Keep a static state cue when animation is removed. A change of writing direction or icon artwork can make the chosen rotation misleading, so inspect the complete control rather than the isolated icon. Preserve the browser's focus indicator around the button.

Common Mistakes

  • Do not use a rotating icon as the only expanded-state signal.
  • Do not expect a transform to reserve extra layout space.
  • Do not animate the full text control when only its icon needs motion.

Connected lessons

css
reference
web
Storage details