CSS Transforms

The transform property lets you visually move, rotate, scale, or skew an element without affecting the document's normal layout flow — surrounding elements behave as if the transformed element were still in its original position and size. This makes transforms extremely efficient for animation and interactive effects, since they are handled by the browser's compositor rather than triggering expensive layout recalculations.

Transforms are commonly paired with transitions or animations (covered next) to create movement, but a transform can also be applied as a static style on its own, such as rotating an icon or offsetting an element by a precise amount.

Why it matters

Transforms move, rotate, scale and skew an element without disturbing the layout around it. They are behind hover effects, sliding menus, spinning loaders and the classic centring trick. Because the browser handles them cheaply, they are also the right way to animate movement.

The Four Core Transform Functions

Each function manipulates a different visual aspect of the element, and multiple functions can be combined in one declaration.

• translate(x, y) — moves an element along the X and/or Y axis, e.g. translate(20px, -10px); translateX() and translateY() target a single axis.
• rotate(angle) — rotates an element around its center by a given angle, e.g. rotate(45deg).
• scale(x, y) — resizes an element proportionally, e.g. scale(1.2) enlarges it by 20%; scale(1, 0.5) stretches only the vertical axis to half size.
• skew(x-angle, y-angle) — slants an element along the X and/or Y axis, e.g. skewX(10deg) creates a slanted, italic-like effect.

Combining Transforms and transform-origin

Multiple transform functions can be listed space-separated in a single declaration, and they apply in the order written: transform: translateX(20px) rotate(15deg); first shifts the element, then rotates it. The transform-origin property controls the pivot point for rotation and scaling, defaulting to the element's center (50% 50%); setting it to a corner, like transform-origin: top left;, changes how the element rotates or scales around that point instead.

Why Transforms Are Performance-Friendly

Because translate, rotate, and scale don't change an element's actual position or size in the document flow, the browser can animate them purely on the GPU compositor layer without recalculating layout or repainting neighboring elements — this is why transform (along with opacity) is recommended over animating properties like top, left, width, or margin for smooth, efficient animations.

Examples

.card {
  transition: transform 0.25s ease;
}

.card:hover {
  transform: translateY(-8px) rotate(-1deg);
}

On hover, the card lifts 8 pixels upward and tilts very slightly counter-clockwise, giving a subtle, tactile "lift off the page" effect without disturbing the layout of surrounding cards.

.icon {
  transform-origin: top left;
  transition: transform 0.2s ease;
}

.icon:hover {
  transform: scale(1.5);
}

The icon grows to 150% of its size while its top-left corner stays fixed in place, rather than expanding outward evenly from its center as it would with the default transform-origin.

Exercise

Tilt the heading by 2 degrees anticlockwise, rotating around its left edge. When the button is hovered, lift it 4px and enlarge it by 5%.

Expected result: a slightly tilted heading, and a button that rises and grows under the pointer while the paragraph above it stays still.

/* The page contains: <main> with an <h1>, a <p> and a <button> */

h1 {
  /* TODO: rotate -2 degrees around the left edge */
}

button:hover {
  /* TODO: move up 4px and scale to 105% */
}

/* The page contains: <main> with an <h1>, a <p> and a <button> */

h1 {
  transform: rotate(-2deg);
  transform-origin: left center;
}

button:hover {
  transform: translateY(-4px) scale(1.05);
}

Quick quiz

Interview questions