Proprietà CSS scale

Definition and usage

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

scale The attribute defines the scaling ratio values in the x and y directions of the element. You can also define the scaling ratio in the z direction.

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

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

To better understand scale attribute, please seeDemonstration.

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

Instance

Example 1

Change the size of the element:

div {
  scale: 2;
}

Try it yourself

Example 2

When scale When the attribute is set to two values, it sets the size on the x-axis and y-axis respectively. Here, the element's size 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

Value Description
x-axis

Define the scaling ratio on the x-axis. Possible values:

  • Number
  • Percentage
y-axis

Define the scaling ratio on the y-axis. Possible values:

  • Number
  • Percentage
z-axis

Define the scaling ratio on the z-axis. Possible values:

  • Number
  • Percentage
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical details

Default value: none
Inheritance: No
Animation creation: Supported. See:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.scale="2 0.7"

Browser support

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

Chrome Edge Firefox Safari Opera
104 104 72 14.1 90

Related pages

Lezione:CSS 2D Transformation

Lezione:Trasformazione 3D CSS

Riferimento:Proprietà CSS rotate

Riferimento:Proprietà translate CSS