Transforms in CSS
From the CSS cheat sheet · Positioning · verified Jul 2026
Transforms
Move, rotate, scale, and skew elements with CSS transforms
css
transform: translateX(20px);
transform: rotate(45deg);
transform: scale(1.5);
transform: skew(10deg);
/* Combine multiple */
transform: translate(-50%, -50%) rotate(45deg) scale(1.2);💡 Transforms are GPU-accelerated — translateX/Y and scale are very performant for animations
⚡ transform: translateY(-4px) on hover creates a subtle lift effect — better than changing margin
📌 Transform order matters — translate then rotate gives different results than rotate then translate
🟢 Use perspective on the parent for 3D effects, and backface-visibility: hidden for flip cards
transformrotatescaletranslate