Transform Functions in CSS
From the CSS Animations cheat sheet · CSS Transform · verified Jul 2026
Transform Functions
Move, rotate, scale, and skew elements in 2D space
css
transform: translateX(50px);
transform: translateY(-20px);
transform: translate(50px, 100px);
transform: scale(1.5);
transform: rotate(45deg);
transform: skew(10deg, 20deg);
/* Multiple transforms */
transform: rotate(45deg) scale(1.5) translateX(50px);💡 Combine multiple transforms in order
⚡ transform-origin changes the anchor point
📌 Use scale() for zoom effects
✅ translate() is better than position for animations
Continue with CSS Animations
Save the full cheat sheet or work through every related task.