scale | CSS-Tricks - CSS-Tricks

The scale property in CSS resizes an element’s width and height in proportion. So, if we have an element that’s 100 pixels square, scaling it up by a value of 2 doubles the dimensions to 200 pixels square. Similarly, a scale value of .5 decreases the dimensions in half, resulting in 50 pixels square.

.element {
  width: 20px;
  height: 20px;
  scale: 2; /* Results in 40 pixels square */
}

There just so happens to be another way to scale elements, using the scale() function on the transform property, á la:

.element {
  width: 20px;
  height: 20px;
  transform: scale(2); /* Results in 40 pixels square */
}

…the CSS scale property does it independently of the transform property, giving us a little extra flexibility to scale things without having to chain the effect with other transforms.

Syntax

scale: none | <number>{1,3};

The scale property accepts the none keyword, or up to three numeric values. A single numeric value scales the element along the X (horizontal) and Y (vertical) axes by the same value. If two values are provided, the first one scales the X-axis and the second scales the Y-axis. If three values are provided, the third value corresponds to the Z-axis, which scales the element’s depth in a 3D context (it happens to be the equivalent of using transform: scale3d().

Initial: none
Applies to: transformable elements
Inherited: no
Computed value: as specified
Animation type: a transform
Creates stacking context: yes

Values

/* Keyword values */
scale: none;

/* Single values */
scale: 2;
scale: 0.25;

/* Two values */
scale: 2 1;

/* Three values */
scale: 1 1.5 2;

/* Global values */
scale: inherit;
scale: initial;
scale: revert;
scale: unset;

none: This means there’s no scaling applied to the element; effectively the same as scale: 1.
<number>{1,3}: This says the property accepts up to three values that are used to multiply the element’s dimensions.

Scaling does not distort the natural layout flow

It is important to know that the scale property does not cause other elements to flow around it like the scale() transform function does. That means an element’s scale does not result in the elements around it reflowing in order to make additional (or less) room available based on the scale of that element.

Scaling affects child and descendent elements

Another thing to note is that the scale property scales all of an element’s descendants. For example, let’s say we have text inside the element. Changing the elements scale scales both the element and the text.

Transitions and animations

And, yes, we can use scale in CSS transitions and animations. For example, we can make any element smoothly transition between scales on, say, hover:

We can even get a little more creative when we combine scale with other independent transform properties, like translate:

Fallbacks

While browser support is building for the CSS scale property and other independent transform properties, it’s probably worth checking for support when using scale:

.box:hover {
  transform: scale(2); /* Fallback to this */
}

@supports (scale: 1) {
  .box:hover {
    scale: 2; /* Used if support for `scale` is detected */
  }
}