transform

transform changes an element’s coordinate space after normal layout. Nearby content keeps its original flow position, while the transformed element may overlap it or extend scrollable overflow.

See why function order matters

The two squares begin in separate identical stages. Translate then rotate and rotate then translate produce different positions because each function changes the coordinate space used by the next.

<p>Translate then rotate</p>
<div class="stage"><div class="square first">A</div></div>
<p>Rotate then translate</p>
<div class="stage"><div class="square second">B</div></div>

.stage {
  padding: 2rem;
  background: #eff6ff;
  margin-block: 1rem;
}
.square {
  width: 70px;
  height: 50px;
  background: #2563eb;
  color: white;
  display: grid;
  place-items: center;
}
.first {
  transform: translateX(70px) rotate(30deg);
}
.second {
  transform: rotate(30deg) translateX(70px);
}

Center a positioned decoration

Top/left percentages use the containing block; translate percentages use the transformed box. Combining 50% with -50% centers this fixed-size box.

<div class="stage"><div class="square" aria-hidden="true"></div></div>

.stage {
  position: relative;
  height: 170px;
  background: #eff6ff;
}
.square {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 60px;
  background: #2563eb;
  transform: translate(-50%, -50%);
}

Values and defaults

The initial value is none and the property is not inherited. A space-separated list can contain translate(), rotate(), scale(), skew(), matrix(), or 3D functions such as rotateY() and translateZ(). Commas separate arguments inside relevant functions, not separate transform functions. A later transform declaration replaces the whole list.

Individual translate, rotate, and scale properties compose in that order before transform, regardless of declaration order. Transform-origin selects the pivot/reference origin. Non-replaced inline boxes are not transformable; use an appropriate inline-block or block box.

Common mistakes

A non-none transform creates a stacking context and a containing block for positioned descendants, including fixed-position content. Even an identity transform can have those effects. Unsupported utility class names do not create 3D CSS: write actual properties/functions. A 3D transform does not guarantee GPU acceleration. For motion, honor reduced-motion preferences and verify the real performance trace.

Learn transform-origin, translate, and perspective.

Sources and browser support

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