Transform

A CSS property that allows you to rotate, scale, skew, or translate an element in 2D or 3D space without affecting the document flow.

Overview

CSS transforms let you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed. Transforms are hardware-accelerated and commonly used for animations and interactions.

Example

css
/* Translate (move) */
.move {
  transform: translateX(100px);
}

/* Rotate */
.rotate {
  transform: rotate(45deg);
}

/* Scale */
.scale {
  transform: scale(1.5);
}

/* Combine multiple transforms */
.combined {
  transform: translateX(50px) rotate(30deg) scale(1.2);
}

Key Points

  • 2D transforms: translate, rotate, scale, skew
  • 3D transforms: translateZ, rotateX, rotateY, perspective
  • Hardware-accelerated for smooth animations
  • Doesn't affect document flow
  • Can combine multiple transforms

Learn More