Transforms

Overview

The transform property visually repositions or reshapes an element without affecting document flow, so surrounding content stays put. It supports 2D and 3D functions like translate, rotate, scale, and skew, applied in the order you list them. Because transforms are GPU-accelerated, they pair well with transitions and animations.

Syntax / Usage

Combine multiple functions in a single transform value; they apply right to left conceptually but are written left to right. Use transform-origin to change the pivot point, and enable 3D with perspective.

.tile {
  transform: translateX(20px) rotate(15deg) scale(1.1);
  transform-origin: center;
}

.scene {
  perspective: 800px; /* enables depth for 3D child transforms */
}

Examples

Centering an absolutely positioned element regardless of its size:

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

A card that flips in 3D on hover:

.flip {
  transform-style: preserve-3d;
  transition: transform 500ms ease;
}

.flip:hover {
  transform: rotateY(180deg);
}

Scaling an image on hover while clipping overflow:

.thumb {
  overflow: hidden;
}

.thumb img {
  transition: transform 300ms ease;
}

.thumb:hover img {
  transform: scale(1.08);
}

Common Mistakes

• Expecting transform to reserve layout space — it never shifts neighboring elements
• Applying transforms to inline elements, which ignore them (use inline-block or block)
• Forgetting perspective on the parent, so 3D rotations look flat
• Reordering functions and getting surprised — rotate then translate differs from the reverse
• Losing the transform-origin context after changing it, causing off-center rotations

See Also

css-transitions css-animations css-positioning