🎓 A1Learner
🔍

CSS Transforms

A transform changes how an element looks on screen, by moving it, resizing it or turning it. The layout around the element stays where it was.

Scale grows the image

The scale factor 1.5 makes the image look half as large again. Its layout box stays 120 pixels wide while its drawn size grows.

.pic {
  transform: scale(1.5);
}

Rotate turns the button

The rotate function turns the button inside the box. The angle of 10 degrees tips it slightly clockwise.

.box button {
  transform: rotate(10deg);
}

Translate shifts the paragraph

The translate function moves the demo paragraph 20 pixels right and 10 pixels down. The two lengths sit in the last two slots of the matrix.

#demo {
  transform: translate(20px, 10px);
}

Example

.pic {
  transform: scale(1.5);
}
.box button {
  transform: rotate(10deg);
}
#demo {
  transform: translate(20px, 10px);
}

Key points

  • translate moves an element by the lengths it is given.
  • scale resizes an element by the factor it is given.
  • rotate turns an element by an angle in degrees, written like 10deg.
  • Functions chain inside one transform value, one after another.
  • A transform is visual only, and the neighbours of the element keep their places.

In this example, the image grows by a scale factor of 1.5. The button inside the box turns by 10 degrees. The demo paragraph shifts 20 pixels right and 10 pixels down. Each computed transform is a matrix, and no element in the layout moves for any of them.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

An element is scaled with transform. What happens to the elements around it?