CSS Transforms

Move, rotate, scale and skew elements without disturbing the layout.

Lesson 45 of 49Intermediate11 min read

The transform property lets you move, rotate, resize and tilt an element visually, without pushing anything else on the page around. Combined with transitions and animations, it's behind almost all the motion you see on the web.

Transforms are also very efficient. Because they don't change the layout, the browser doesn't have to recalculate the position of every other element when a transform changes. That's why hover effects and animations built with transforms stay smooth, even on modest phones.

The CSS transform functions

FunctionExampleWhat it does
translate(x, y)translate(20px, -10px)Moves the element
translateX() / translateY()translateY(-4px)Moves it along one axis
rotate()rotate(45deg)Turns it (turn also works: 0.5turn)
scale()scale(1.2), scale(1, 0.5)Makes it larger or smaller
skew()skew(10deg)Slants it

Percentages in translate refer to the element's own size, not its parent's. translateX(100%) moves an element by exactly its own width, which is useful for slide-in panels.

Combining several transforms

List several functions separated by spaces. Order matters, because they are applied from right to left:

CSS
transform: translateX(100px) rotate(45deg);

Rotating and then moving gives a different result from moving and then rotating, because a rotated element moves along its rotated direction.

Watch out when a hover state sets transform again. transform: scale(1.1) on hover replaces the whole value, so any translate set on the normal state disappears unless you repeat it.

Changing the pivot point with transform-origin

Rotation and scaling happen around a pivot point, which is the centre of the element by default. Change it with transform-origin, using values like top left, bottom center or 20% 80%.

Think of a door swinging on its hinge: transform-origin: left makes an element rotate around its left edge in the same way.

Transforms don't affect the layout

A card that scales up on hover overlaps its neighbours instead of pushing them away, and its original space stays reserved. That's exactly what makes transforms fast to animate and ideal for hover effects. If you need surrounding elements to make room, change the width or margins instead.

A classic use of this behaviour is centring: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); places an element in the exact middle of its parent, whatever its size.

CSS Transforms Syntax

Transform syntax

.el {
  transform: translate(10px, 0) rotate(5deg) scale(1.1);
  transform-origin: center;
}

CSS Transforms Summary

  • transform moves, rotates, scales and skews elements visually.
  • Transforms don't change the layout, so neighbours aren't pushed away.
  • Several functions can be combined, and their order matters.
  • transform-origin sets the point that rotation and scaling happen around.
  • Transforms are ideal for smooth hover effects and animations.

CSS Transforms Examples

Each example runs in the page. Edit the code and press Run to see what changes.

Example 1

The four basic transforms

Hover over each tile.

.row { display: flex; gap: 14px; padding: 20px; }

.tile {
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  background: #e1e6ff;
  border: 2px solid #4467ff;
  border-radius: 12px;
  font: 12px monospace;
  transition: transform 0.3s;
}

.t1:hover { transform: translateY(-12px); }
.t2:hover { transform: rotate(20deg); }
.t3:hover { transform: scale(1.2); }
.t4:hover { transform: skewX(-12deg); }
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 12A transition makes each change smooth.
  2. Line 15Move up 12px.
  3. Line 16Rotate 20 degrees clockwise.
  4. Line 17Grow to 120%. Notice that it overlaps its neighbours without moving them.
  5. Line 18Slant along the X axis.
Example 2

transform-origin and centring

.door-frame { width: 80px; height: 120px; border: 3px solid #15161b; perspective: 400px; margin-bottom: 16px; }
.door {
  height: 100%;
  display: grid; place-items: center;
  background: #f0592b;
  font-size: 30px;
  transform-origin: left;
  transition: transform 0.6s;
}
.door-frame:hover .door { transform: rotateY(-70deg); }

.stage { position: relative; height: 120px; background: #fff1c2; border-radius: 12px; }
.centre {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 8px 12px;
  border-radius: 8px;
}
ResultEdit the code, then press Run or Ctrl+Enter
Line-by-line explanation
  1. Line 6The hinge is on the left edge.
  2. Line 9Hover the frame: the door swings open in 3D.
  3. Lines 14 to 16Classic centring: move the top-left corner to the middle, then pull back by half the element's own size.

Common CSS Transforms Mistakes

Writing two transform properties

Don't
.icon {
  transform: rotate(45deg);
  transform: scale(2);   /* replaces the rotate! */
}
Do
.icon { transform: rotate(45deg) scale(2); }

The second declaration overwrites the first. Put all functions in one value (or use the separate rotate and scale properties).

Forgetting units

Don't
.box { transform: rotate(45) translateX(10); }
Do
.box { transform: rotate(45deg) translateX(10px); }

CSS Transforms in Real Projects

Transforms in interfaces

Arrows that rotate when a dropdown opens, cards that zoom on hover, image carousels that slide, loading spinners, flip cards, modals that scale in, and the "lift" on buttons across this site all rely on transform.

CSS Transforms Exercises

Answer each one and check it instantly. If you get stuck, open the hint before the answer.

Fill in the blankseasy

Rotate the arrow 180 degrees and grow it by 50%.

.arrow {
  transform: (180deg) (1.5);
}
Multiple choiceeasy

Does transform: scale(2) push neighbouring elements away?

Multiple choicemedium

How do you make an element rotate around its top-left corner?

Fix the bugmedium

The badge should be rotated -8deg and scaled to 1.1. Only one transform is working. Fix it.

.badge {
  display: inline-block;
  padding: 6px 12px;
  background: #e5484d;
  color: white;
  transform: rotate(-8deg);
  transform: scale(1.1);
}
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Both rotate and scale are applied

CSS Transforms Quiz

3 questions to check what you learned.

  1. Which function moves an element?

    • move()
    • shift()
    • translate()
    • position()

  2. How do you centre an absolutely positioned element of unknown size?

    • margin: auto only
    • align: center
    • transform: center
    • top: 50%; left: 50%; transform: translate(-50%, -50%);

  3. In transform: translateX(100px) rotate(90deg), what's applied first visually?

    • The translate
    • The rotate (transforms apply right to left)
    • Both at once with no difference
    • Neither

CSS Transforms Challenge

Make a tilted sticker

Style .sticker:

  1. Rotate it -6deg
  2. Use transform-origin: center
  3. On hover, rotate to 0deg and scale to 1.1, with a transition on transform
.sticker { display: inline-block; margin: 30px; padding: 10px 16px; background: #ffd23f; border: 2px solid #15161b; font: 700 16px sans-serif; }
ResultEdit the code, then press Run or Ctrl+Enter
Checks
  • Sticker is rotated -6deg
  • Transition on transform
  • Hover rule straightens and scales

Related CSS topics

44TransitionsAnimate changes smoothly between two states, from hover effects to menus.46AnimationsMulti-step animations with @keyframes: spinners, pulses and entrance effects.17Position & z-indexMove elements with relative, absolute, fixed and sticky, and stack them with z-index.
Esc
↑↓ to navigateEnter to open