Transform

ELI5 — The Vibe Check

CSS transform lets you rotate, scale, move, and skew elements without affecting the document flow. It's like picking up a sticker and moving it around — the space underneath stays the same. Best of all, transforms are GPU-accelerated, so they're buttery smooth.

Real Talk

The CSS transform property applies 2D or 3D geometric transformations to elements (translate, rotate, scale, skew, matrix). Transforms are composited on the GPU, making them highly performant for animations. They don't trigger layout recalculation, only compositing, which is why they're preferred for animations.

Show Me The Code

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

When You'll Hear This

"Only animate transform and opacity — everything else triggers expensive layout" / "Use translate instead of top/left for animations — it's GPU-accelerated"