CSS Transforms

Definition

CSS properties that reposition, rotate, or scale elements in 2D or 3D space.

Why It Matters

Transforms manipulate geometry for better visual layout and interaction, often hardware-accelerated for smooth rendering.

Core Concepts

• 2D Transforms: rotate(), translate(), scale(), skew() with transform-origin.
• 3D Transforms: perspective, rotateX/Y/Z, translateZ, backface-visibility.
• Performance: GPU-accelerated transforms (translate, scale) avoid layout reflow — prefer them over changing top/left for animations.

.box {
  transform: rotate(45deg) scale(1.2);
}

.card:hover {
  transform: translateY(-10px) rotateY(180deg);
}

Connected Concepts

• CSS Box Model
• CSS Transitions
• Scalable Vector Graphics (SVG)