CSS Transforms: translate, rotate, scale and skew

The CSS transform property moves, rotates, scales, or skews an element visually. Combine transform functions to create small layout details and interface effects.

Quick answer: Set transform to one or more functions such as translate(), rotate(), scale(), and skew(). A transform changes how an element is drawn, but it does not move neighboring content to make room.

Move an element with translate()

Use translateX() or translateY() to move along one axis, or use translate() for horizontal and vertical distances. Positive and negative lengths move in opposite directions.

.badge {
  transform: translate(12px, -6px);
}

This shifts the badge right by 12 pixels and up by 6 pixels. Its original space in the document remains, so nearby content does not automatically move.

Rotate, scale and skew

Use rotate() to turn an element, scale() to resize it visually, and skew() to slant it. Combine functions when an effect needs more than one change:

.card:hover {
  transform: translateY(-4px) scale(1.02);
}

.sticker {
  transform: rotate(-4deg);
}

Transform function order matters because each function works with the coordinate space created by the previous transforms. Test combinations with small values so the element stays readable and does not obscure nearby content.

Choose the transform origin

By default, a transform pivots around the element’s center. Use transform-origin to set another point, such as the top-left corner of a panel or the base of a rotating icon.

.swinging-card {
  transform-origin: top left;
  transform: rotate(3deg);
}

The origin changes where the visual transformation starts; it does not change the element’s document position.

Transforms and page layout

Because transforms do not change normal document flow, a transformed element can overlap other content. Use CSS Grid, Flexbox, margins, or positioning when you need to organize the actual layout. Use transforms for visual movement and effects. Also check the result at different viewport sizes and zoom levels.

Add motion carefully

A transform can change instantly or transition over a short duration. Make the effect available for keyboard focus as well as pointer hover, and respect reduced-motion settings for nonessential movement.

.card {
  transition: transform 160ms ease-out;
}

.card:hover, .card:focus-within {
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: none;
  }
}

Continue with the CSS transitions lesson to learn how to control changes between states, then explore keyframe animations for a sequence of styles.

CSS transform questions

Does transform change an element’s width or height?

A transform changes the visual rendering of the element but does not change its layout dimensions. For example, scale(1.2) makes an element appear larger while its original layout space remains.

How do I reset a transform?

Set transform: none in the rule where the visual transformation should end. This removes the applied transform functions.

Practice: make a card lift on focus

Create a card with a link inside it. Add a small translateY() effect to both the hover and keyboard focus within the card, then add a short transition and a reduced-motion rule. Check that the lifted card does not cover important text or controls nearby.