Mandala   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /   / / / / / / / / / / / /  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +  + + + + + +{ { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }  { { {} } } }      ../../    ../../    ../../    ../../    ../../    ../../    ../../ <></><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </><></><></> <> </>

The CSS scale Property

This article demonstrates the CSS scale property with examples and code samples, which can be used to scale an element on the x, y, and z-axis.

The scale property in CSS is a CSS transformation property. It makes it possible for a developer to resize an element in a three-dimensional plane across the x, y, and z-axis. The property can also help decrease or increase the size of an element. Hence, the scale property can zoom in and out a selected element. When applying the scale transformation, it is essential to instruct the web browser, the user is surfing on, about the number to resize. A vector or a single number defines the scaling value. By using the scale property you can scale elements vertically and horizontally.

Syntax

scale: none | [ <number> | <percentage> ]{1,3}

The scale property allows you to input the “none” keyword or one to three numeric values.

When providing numeric values, scale, scales the selected element along the X, Y, Z-axis. For example, if you provide two values, the first will scale the X-axis while the second will scale the Y-axis. On the other hand, if you provide three values, the third one will correspond to the Z-Axis, thus scaling the element’s depth in a 3D context, the same as transform: scale3d().

The x, y, and z of scale look like this:

scale: { sx };
scale: { sx, sy };
scale: { sx, sy, sz };

  • sx in this context resizes the element in the horizontal plane, x-axis.
  • sy resizes the elements in the vertical plane, y-axis.
  • sz resizes the elements on the z axis.

But here’s the catch, if no values are defined after the sx, then the element is resized using only the sx in a horizontal and vertical direction.

Values

Keyword values

/* Keyword values */
scale: none;

Single values

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

Two values

/* Two values */
scale: 2 0.25;

Three values

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

Global values

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

Usage

You can apply the scale property to any element by using CSS selectors.

#element-id {
  scale: 2;
}

.element-class {
  scale: 1 1.5;
}

img {
  scale: 2 1 2;
}

Another reference article highlighted the CSS scale function and its parameters. Keep in mind that the scale function is not the same as the scale property.

Examples

What scale looks like in a line of CSS code:

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

If we have an element that’s 20 pixels square, scaling it up by a value of 2 will automatically double the dimensions to 40 pixels square. As seen in the line of codes above, the CSS scale property does “its job” independently of the transform property, thus, giving users more flexibility to help scale elements without linking the effect with other transforms.

Reiteratively, the transform property happens to be another way to scale your HTML elements since the scale is a function of transform, and this is what it looks like:

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

  • (Single Values) scale: 2 – The <number> specifies a scale factor that makes the selected element scale by the same factor along the X- and Y-axis. This is equivalent to (2D scaling) function but with a single specified value.
  • (Two Values) scale: 1 0.25 – It represents two <number> ‘s’ that specifies the X- and Y-axis values of the 2D scale. It is the same as the transform: scale(x, y) (2D scaling) CSS property with two values specified.
  • (Three Values) scale: 2 0.5 1 – Three values, on the other hand, represent three <number) ‘s’ that specify X-, Y-, Z-axis scaling values of a 3D scale. Similar to transform: scale3d(x, y, z).
  • None: It means no scaling is applied to the element, which is the same as scale: 1.

Example of CSS scale with hover

Using the CSS Scale Property With Hover
Using the CSS Scale Property With Hover

HTML

<div class="box"></div>

CSS

html, body {
     height: 100vh;
     width: 100%;
     background: #cccccc;
     font-family: system-ui;
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     min-height: 100vh;
}
.box {
     background: #2872fa;
     height: 100px;
     margin: 50px auto;
     width: 100px;
     transition: 300ms;
     border-radius: 50%;
}
.box:hover {
     scale: 1.5;
}

You can edit this example of scale on codepen.io

Fallbacks

In this case, though web browser support is currently building for the scale property, we recommend checking for support when using the scale. Here’s what the CSS scale fallback looks like:

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

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

Accessibility issues

Scaling and zooming animations can be quite taxing and complex for accessibility. If there’s ever a need to include such animations on your website or application, ensure to provide control to enable users to turn it off. We recommend doing this site-wide.

It would help if you considered using prefers-reduced motion to write media queries, which will ultimately turn off animations whenever the user has reduced the animation specified in the user’s web system preference.

Notables

  • Scaling doesn’t distort the natural layout flow.

It is crucial to note that the scale property doesn’t affect other elements or make them flow to wrap around it as the transform scale function does. In simple terms, that means an element’s scale doesn’t alter the other elements’ motion to make an extra room available due to that specific element.

  • Scaling affects the child as well as the descendants’ elements

Another thing to note is that the CSS scale property scales all the element’s descendants. For instance, if you have an image inside the element. Altering the elements scale will automatically scale both the element and the image within it.

Compatible Browsers

Browsers currently compatible with the CSS Scale property include:

Desktop:

  • Chrome (no)
  • Edge (no)
  • Firefox (72)
  • Internet Explorer (no)
  • Opera (no)
  • Safari (14.1)

Mobile:

  • Chrome Android (no)
  • Firefox for Android (79)
  • Opera Android (no)
  • Safari for iOS (14.5)
  • Samsung Internet (no)
  • WebView Android (no)

Specifications

W3C CSS Transforms Module Level 2
#propdef-scale

Recommended Articles