CSSApril 2026 · 6 min read

How to Use CSS Transforms: Rotate, Scale, Translate, Skew

CSS transforms change an element's shape, size, position, and rotation without affecting layout — the element's original space is preserved. This makes transforms ideal for animations and hover effects because they don't trigger layout recalculation, which means smooth, GPU-accelerated performance.

🔄

Try the CSS Transform Playground

Free, no signup

→

Derek Giordano

Designer & Developer

In this guide

01Basic 2D Transforms02Combining Transforms03Transform Origin043D Transforms

⚡ Key Takeaways

Transform elements with CSS: rotate, scale, translate, and skew.
Covers basic 2d transforms.
Covers combining transforms.
Covers transform origin.
Covers 3d transforms.

Basic 2D Transforms

translate(x, y) — moves the element. translateX(50px) shifts right 50px. translate(-50%, -50%) centers an element relative to its position.

rotate(angle) — rotates clockwise. rotate(45deg) turns 45 degrees. Negative values rotate counterclockwise.

scale(x, y) — resizes. scale(1.5) enlarges 150%. scale(0.5) shrinks to 50%. scale(-1) mirrors/flips.

skew(x, y) — tilts. skewX(10deg) tilts horizontally.

Combining Transforms

Chain transforms in one declaration:

💡 Tip

Use gap instead of margin hacks for flexbox spacing. It keeps layout code cleaner and is supported in all modern browsers.

transform: translateY(-10px) rotate(5deg) scale(1.05);

Order matters — transforms are applied right to left. translate then rotate gives different results than rotate then translate. For hover effects, the most common combination is translate + scale for a 'lift and grow' effect.

Transform Origin

transform-origin sets the pivot point for rotations and scaling. Default is center. Top-left: transform-origin: 0 0. Bottom-right: transform-origin: 100% 100%. Custom: transform-origin: 20px 80%. This is critical for door-swing animations, card flips, and fan-out effects. The CSS Transform Playground lets you adjust the origin visually.

⚠ Warning

Avoid animating width, height, top, or left. These trigger layout recalculations on every frame and can drop performance below 60fps.

3D Transforms

perspective() enables 3D space. rotateX() and rotateY() rotate in 3D. translateZ() moves toward/away from the viewer:

.card-container { perspective: 1000px; }

.card:hover { transform: rotateY(180deg); }

Set perspective on the parent, then rotate/translate children in 3D. Higher perspective values create subtler 3D effects; lower values create dramatic distortion.

Frequently Asked Questions

What is CSS transform?+

CSS transform modifies an element's visual rendering — position, rotation, size, and skew — without affecting document layout. The element's original space is preserved, making transforms ideal for animations.

What is transform-origin?+

transform-origin sets the point around which transformations are applied. The default is the element's center. Changing it to a corner or edge creates different rotation and scaling behaviors.

Are CSS transforms GPU-accelerated?+

Yes. Transform and opacity are the only two properties that are always composited on the GPU. This makes them dramatically faster to animate than layout properties like width, height, or margin.

Try it yourself

Use the CSS Transform Playground — free, no signup required.

⚡ Open CSS Transform Playground

Derek Giordano

Written by the creator of Ultimate Design Tools. BA in Business Marketing.

📚 References & Further Reading