🎨 HTML / CSS Intermediate

What is the CSS transform property?

Answer

The CSS transform property applies 2D or 3D transformations to an element without affecting document flow — other elements do not reflow around the transformed element. Common functions: translate(x, y) moves the element (GPU-accelerated when combined with will-change). scale(x, y) resizes. rotate(angle) rotates. skew(x, y) slants. matrix() applies a full transformation matrix. Multiple functions chain: transform: translateX(50px) rotate(45deg) scale(1.2). A key benefit for animation: transforms and opacity are the only CSS properties that browsers can animate on the GPU compositor thread, avoiding main-thread layout recalculations and enabling smooth 60fps animations.