Transforms (2D & 3D)

Move, scale, spin, and skew elements without breaking your page layout.

CSS5 min readConcept 31 of 43

What are Transforms?

The transform property lets you visually manipulate an element in 2D or 3D space. You can move it (translate), resize it (scale), spin it (rotate), or distort it (skew).

Crucially, transforms happen in a separate compositing layer. This means you can wildly move an element around the screen, and the surrounding text and layout won't flinch at all.

Why are they important?

Transforms are the absolute backbone of modern web animation. If you try to animate an element moving across the screen by changing its margin-left or top properties, the browser has to recalculate the entire page layout on every single frame, causing horrible lag.

Because transforms are hardware-accelerated by the GPU, they guarantee a buttery-smooth 60fps experience.

How do you use them?

You declare the transform property and chain one or more functions together. For example: transform: translate(50px, 100px) rotate(45deg);.

By default, all transforms originate from the exact dead-center of the element. You can change this anchor point using the transform-origin property (like setting it to top left).

Try it

Use the sliders to manipulate the card in 2D and 3D space. Notice how the code updates to chain the transform functions together.

CSS Transform Explorer

3D Space (Parent)

Applies depth to the container.

Scale (2D)

1x
0.51.5

Rotate (2D)

0°
-180°180°

Rotate X (3D)

0°
-180°180°

Rotate Y (3D)

0°
-180°180°
// 1. Optional 3D Camera
.stage-parent {
perspective:1000px;
}
// 2. Manipulate the Element
.target-card {
transform:
scale(1)
rotate(0deg)
rotateX(0deg)
rotateY(0deg);
}
CSS

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Why is it a best practice to animate transform instead of margin or top/left?
  2. 2Which property changes the anchor point that an element rotates or scales around?
  3. 3If you apply transform: scale(2) to a 100px box, what happens to the surrounding text?

Remember this

  • Always use transform (never margins) for moving or scaling animations.
  • Chain multiple functions on one property: transform: scale(1.5) rotate(10deg).
  • Use transform-origin to change the anchor point from the center to an edge.
  • Remember that applying a transform creates a new stacking context.

Done with this concept?

Mark it complete to track your progress. No login needed.