Codectionary / Developer documentation / CSS

Transforms

transform lets you visually move, rotate, scale, or skew an element without affecting the document flow of surrounding elements - unlike changing position/width directly. Multiple transform functions can be combined in a single declaration, and transform-origin controls the pivot point for rotation and scaling.

Syntax

transform: translate() rotate() scale() skew();

Examples

The Four Core Transform Functions

Moving, rotating, scaling, and skewing an element.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block:1rem}.preview-origin{border:1px dashed #94a3b8;margin:2rem;min-width:7rem;min-height:5rem}.preview-transform{width:7rem;height:5rem;padding:.5rem;background:#fee2e2;color:#7f1d1d;box-sizing:border-box}

.move { transform: translate(20px, 10px); }
.rotate { transform: rotate(15deg); }
.grow { transform: scale(1.2); }
.skewed { transform: skew(-10deg, 0); }

/* Combining multiple transforms in one declaration */
.combined { transform: translateX(10px) rotate(5deg) scale(1.1); }
  1. The dashed outline shows the original untransformed layout box.
  2. The coloured element moves, rotates, scales or skews visually while its normal-flow footprint remains at the original location.
  3. For the origin example, compare rotation around the centre with rotation around the upper-left corner.
HTML used by this example
<div class="preview-row"><div class="preview-origin"><div class="move preview-transform">move</div></div><div class="preview-origin"><div class="rotate preview-transform">rotate</div></div><div class="preview-origin"><div class="grow preview-transform">grow</div></div><div class="preview-origin"><div class="skewed preview-transform">skewed</div></div><div class="preview-origin"><div class="combined preview-transform">combined</div></div></div>

transform-origin

Controlling the pivot point that rotation and scaling happen around.

/* Demo setup: sizing, structure or neutral surfaces. */
.preview-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;margin-block:1rem}.preview-origin{border:1px dashed #94a3b8;margin:2rem;min-width:7rem;min-height:5rem}.preview-transform{width:7rem;height:5rem;padding:.5rem;background:#fee2e2;color:#7f1d1d;box-sizing:border-box}

.default-origin {
  transform: rotate(45deg); /* pivots around the center by default */
}

.corner-origin {
  transform-origin: top left;
  transform: rotate(45deg); /* now pivots around the top-left corner instead */
}
  1. The dashed outline shows the original untransformed layout box.
  2. The coloured element moves, rotates, scales or skews visually while its normal-flow footprint remains at the original location.
  3. For the origin example, compare rotation around the centre with rotation around the upper-left corner.
HTML used by this example
<div class="preview-row"><div class="preview-origin"><div class="default-origin preview-transform">default-origin</div></div><div class="preview-origin"><div class="corner-origin preview-transform">corner-origin</div></div></div>

Parameters and values

  • translate() (x, y): Moves the element without affecting document flow
  • rotate() (angle): Rotates the element around its transform-origin
  • scale() (x, y): Resizes the element proportionally or per-axis
  • transform-origin (position): Sets the pivot point for rotation and scaling

Best practices

  • Use transform: translate() instead of changing top/left for moving elements - transforms are GPU-accelerated and do not trigger layout recalculation
  • Combine multiple transform functions in a single declaration rather than stacking multiple transform properties, since only the last one would apply
  • Use scale() for hover effects instead of changing width/height directly, for smoother performance
  • Remember transformed elements do not affect the layout of surrounding elements - the space they originally occupied stays reserved

Browser compatibility

chrome
Yes
firefox
Yes
safari
Yes
edge
Yes

These are the existing reference’s support labels, not tested minimum versions. Individual values and APIs can have different support. Check the linked specification before choosing a browser target.

CSS specifications (modules)

Specifications & further reading