The CSS scale Property

Overview

The scale property provides a way to adjust the size of an element independently of other transform functions. Arguably, this approach simplifies the process of scaling user interface elements and removes the need to remember the specific order of transform functions when applied in the transform property.

Examples and Usage

To demonstrate the behavior of the scale property, we'll resize an element when hovered over. In addition, we'll showcase the use of a single value and how it behaves on both axes and also examine the usage of two values, to observe the property's effects on each axis independently.

HTML Structure

<div class="square"></div>

CSS Styling

.square {
  /* Basic styling and setup for the square. */
  background: #CD3333;
  height: 150px;
  width: 150px;
  margin: 50px auto;

  /* Transition added for smooth scaling on hover. */
  transition: 0.7s ease-in-out;
}
  
.square:hover {
  /* Scaling up the square by 1.5 times along both axes when hovered over. */
  scale: 1.5;
}

In our configuration, we set up a div element with the class .square. This square is styled with a background color, a defined height and width, and centered with automatic margins for illustrative purposes. We also added a transition to the element to make the scaling effect smooth when the element is hovered over.

The key here is scale, which is applied on :hover. The value of 1.5 indicates that the square's size will increase to 1.5 times its original size along both the X and Y axes when it's hovered over.

If we were to change the value of scale to 1.5 0.7, like so:

.square:hover {
  /* Scaling up the square by 1.5 times along the X axis 
  and 0.7 times along the Y-axis when hovered over. */
  scale: 1.5 0.7;
}

Hovering over the square would cause it to scale along the X-axis by 1.5 times its original size and along the Y-axis by 0.7 times its original size, thus stretching the square horizontally and compressing it vertically.

Values

Value	Description
`none`	Indicates that no scaling should be performed on the element.
One value	A number or percentage defining the scale factor. This scales the element uniformly on both the X and Y axes.
Two values	Two numbers or percentages defining the scale factors along the X and Y axes, respectively.
Three values	Three numbers or percentages defining the scale factors along the X, Y, and Z axes. This enables 3D scaling of an element.

In the table above:

One value is analogous to a 2D scale() function set with a single value.
Two values is analogous to a 2D scale() function set with two values.
Three values is analogous to the scale3d() function.

Associated Properties

rotate
transform
translate

Tips and Tricks

Debatably, using individual transform properties like scale can make it easier for beginners to learn and understand transforms and animations in CSS.
By employing the scale property, you can simplify and streamline existing transforms and animations.
Keep in mind that the scale property doesn't trigger a reflow of elements around it as is the case with the scale() function. Specifically, adjusting an element’s scale doesn't result in the neighboring elements repositioning to accommodate the scaled element.
Remember that applying scale to an element also scales all of its descendants. For instance, if you have text within an element and you change the scale of the element, both the element and the text inside it will be scaled.

Browser Compatibility

For a more detailed breakdown, refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes*	No

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.