Translate, Scale, and Rotate

Transforms change how a box is rendered without moving its reserved place in normal flow.

Three transform functions

Translate

transform: translate(1rem, -0.5rem);

Moves the painted box horizontally and vertically.

Scale

transform: scale(1.2);

Changes the painted size around the transform origin.

Rotate

transform: rotate(12deg);

Turns the box around its centre by default.

Function order matters

These boxes use the same functions in a different order, so they finish in different places.

Keep layout consequences in mind

The original box still reserves its normal-flow space. A translated or scaled box can therefore overlap nearby content, so leave enough room and test the result at different viewport sizes.

Important CSS

Transform changes rendered geometry without reflowing layout the same way.

.tile:hover {
  transform: scale(1.05) rotate(-2deg);
}
.shift {
  transform: translateX(1rem);
}