What is CSS scale() Function?

Syntax

Scale() accepts either one or two values representing the amount of scaling in each direction.

The general Syntax is expressed as:

The single parameter assigns the value evenly to both the X and Y axis.

Other syntax with two arguments

sx resizes the elements horizontally, and sy resizes the elements in the vertical plane.

Values of CSS scale() Function

Examples

Example 1: Scaling the X and Y Dimensions Together

HTML

CSS

Output

Example 2: Scaling X and Y Dimensions Separately, and Translating the Origin

HTML

CSS

Output

Scaling Does not Distort the Natural Layout Flow

The scale property does not make other adjacent elements flow around it like the scale() transform function does. It does not cause the components surrounding it to reflow to create the extra (or less) space needed based on the scale of that element.

In the below example, we will scale the box in the center without affecting the layout of the adjacent elements.

HTML

• Here, we have a container with a class scale-box surrounded by two other boxes.
• A range slider to scale the middle box dynamically.

CSS

Javascript

• To scale the container using multiple values, we will use javascript.
• We will set the scale value to scale(1,1) as a default value.
• We will add an event listener and scale the box according to the range value.

Output

Scaling Affects the Child and Descendent Elements

The scale property scales all of an element’s descendants. For example, let’s say we have text inside the element. If we change the elements scale, the scale property scales both the element and the text.

HTML

CSS

Javascript

Output

The text is a child element of the div scales with the container.

Fallbacks

Although almost all modern web browsers support the CSS scale and other independent transform properties, we can always check for fallbacks and support.

Example

Browser compatibility

The following browsers support the scale() in CSS: