CSS scale egenskap

Definition and Usage

scale The attribute allows you to change the size of the element.

scale The attribute defines the scaling ratio values on the x and y axes of the element. You can also define the scaling ratio on the z-axis.

Scaling values can be one, two, or three values.

• If one value is given, the scaling ratio on the x and y axes is the same.
• If two values are given, the element is scaled on the x and y axes by the specified proportions.
• If three values are given, the element is scaled on the x, y, and z axes by the specified proportions.

To better understand scale Please seeDemonstration.

Note:Another technique to scale elements is to use the attribute with CSS scale() funktion of the CSS transform attribute. The CSS explained on this page scale The attribute can be said to be a simpler and more direct way to scale an element.

Instance

Example 1

Change the size of the element:

div {
  scale: 2;
}

Try It Yourself

Example 2

When scale When the property is set to two values, it sets the size on the x-axis and y-axis separately. Here, the size of the element on the x-axis is doubled, and on the y-axis it is halved:

div {
  scale: 2 50%;
}

Try It Yourself

CSS Syntax

scale: x-axis y-axis z-axis|initial|inherit;

Attribute Value

Technical Details

Browser Support

The numbers in the table indicate the browser version that first fully supports this property.

Related Pages

教程：CSS 2D Translation

教程：Tutorial:

Lär dig om CSS 3D-omvandlingCSS rotate egenskap

Lär dig om CSS 3D-omvandlingCSS translate egenskap