Scale Transform

The scale() function resizes an element. Values greater than 1 make it bigger, values between 0 and 1 make it smaller, and negative values flip it. Unlike changing width and height, scaling does not affect the layout flow — the element still takes up the same space in the document.

Scale Values

You can scale proportionally with one value, or independently on each axis with two values. One value scales both X and Y equally. Two values scale X first, then Y.

.bigger {
  transform: scale(1.5);
}

.smaller {
  transform: scale(0.8);
}

.stretched {
  transform: scale(2, 1);
}

.squished {
  transform: scale(0.5, 1.2);
}
    

A scale of 1 is the original size. 2 is twice as big. 0.5 is half size. The element still occupies its original space in the layout, so scaling up creates visual overlap.

Scale on Hover

Scaling on hover is one of the most popular CSS effects. It creates an interactive feel without changing the layout. Cards, buttons, and thumbnails all benefit from a subtle scale effect.

.card {
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}
    

The 5% increase is subtle enough to feel responsive without being jarring. Combined with a box-shadow that also grows, it creates a "lift" effect that feels polished.

Scale with Other Transforms

You can combine scale with other transforms in a single declaration. The order matters — transforms are applied from right to left.

.combined {
  transform: rotate(45deg) scale(1.2);
}

/* Different result */
.combined-reversed {
  transform: scale(1.2) rotate(45deg);
}
    

In the first example, the element rotates first, then scales. In the second, it scales first, then rotates. The order produces different visual results, so experiment to get the effect you want.