transform: move, scale and rotate

The transform property

Time to bring your interfaces to life. transform lets you visually distort an element —move it, scale it, rotate it or skew it— without touching its real position in the document. And it is fast: the browser resolves it on the GPU, so the motion comes out silky smooth.

.box {
  transform: translate(20px, 10px);  /* move in X and Y */
}
.icon {
  transform: scale(1.5);             /* enlarge to 150% */
}
.arrow {
  transform: rotate(45deg);          /* turn 45 degrees */
}

The most used functions

• translate(x, y): shifts the element. Also translateX() and translateY().
• scale(n): changes the size (1 = original, 2 = double, 0.5 = half).
• rotate(angle): turns in degrees (deg), for example rotate(90deg).

You can combine several functions by separating them with spaces:

.combo {
  transform: translateX(10px) rotate(15deg) scale(1.2);
}

It does not affect the document flow

This is key: a transform is purely visual. The element takes up the same space as before; the other elements are not repositioned even if you move it or enlarge it. That is why it is perfect for effects without "jumps": the neighbor next door has no idea your button just grew.

The reference point (origin) of the transformation is controlled with transform-origin (by default, the center of the element).

Examples

Combine transformations

const t = "translateX(10px) rotate(15deg) scale(1.2)";
console.log(t);