← Back to properties

CSS Property

transform

Animation

Applies 2D or 3D transformations like rotation, scaling, or translation to an element.

Syntax

transform: function(value);

Example

transform: translateX(10px) rotate(45deg);

Common use cases

  • Smooth hover scale effects
  • Centering with translate(-50%, -50%)
  • Animated slide-in transitions

Practical developer insight

transform creates a new stacking context — this affects z-index behavior of children. Use transform: translateZ(0) to force GPU acceleration.

Related properties