Proprietà CSS scale
- Pagina precedente Spazio tra righe
- Pagina successiva @scope
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; }
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%; }
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:
|
y-axis |
Define the scaling ratio on the y-axis. Possible values:
|
z-axis |
Define the scaling ratio on the z-axis. Possible values:
|
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
- Pagina precedente Spazio tra righe
- Pagina successiva @scope