Scale - Property CSS

scale

Summary of characteristics of the scale property

Quick description
Sets a scaling of the element (magnification or shrinking).
Status
Standard
Usable for
HTML
Predefined values
none
Initial value
none
Inherited by default
No.
Animation type
Computed value : during an animation, the scale property gradually changes from one value to another.
W3C Module
CSS Transforms Module
References (W3C)
Document status: WD (Working Draft)

Syntactic schema of scale.

Scale property - Syntax diagramSyntax diagram of the scale CSS property. See stylescss.free.fr for details. none none number number {1,3} {1,3}scale:;scale:;
Syntactic schema of scale property
Detailed syntax

The terms in the diagram are described below:

  • number is the coefficient of magnification or reduction (positive or negative number, without units).
  • The syntax can be repeated from one to 3 times.

Description of the scale property.

The scale property defines a transformation of the element (in the CSS sense), i.e. its scaling, that is to say, its enlargement or reduction. The resizing is applied equally to all children of the element.

Like all transformations, the scale effect does not interact with the layout: even if the element gets bigger or smaller, everything that is located after it will not be moved. We can therefore find ourselves in the situation where several elements overlap.

scale expects three values, which correspond to the magnification or reduction coefficients along the axes X, Y and Z. These are defined as follows:

  • The X-axis is the horizontal axis.
  • The Y-axis is the vertical axis. These two axes are in the plane of the screen.
  • The Z axis is perpendicular to the plane of the screen, directed from the screen towards the reader's eye.

The X, Y, and Z axes used by the scale property

In accordance with the usual rules of CSS, the effects of several successive scale properties applied to the same selector, do not accumulate. Thus the code below leaves the element with dimensions reduced by half: the first ruler is replaced by the second, and is ignored.

scale: 2; scale: 0.5;

Values for scale.

  • scale: none;

    No scaling is applied to the element.

    Échantillon
  • scale: 2;

    If only one unique value is specified, the width and height of the element are multiplied by this coefficient.

    This is a number without units. Percentages can be used, and are calculated in relation to Initial dimensions of the element: 200% corresponds to a doubling of the size of the element.

    Échantillon
  • scale: 3 1.5;

    When two numbers are specified, they correspond respectively to the coefficients to be applied the width of the element (x-axis) and the height of the element (y-axis). The dimension along the z-axis is not changed.

    Échantillon
  • scale: 2 0.75 2;

    When a third value is specified, it applies to the thickness of the element (Z axis).
    Percentages are forbidden for the Z axis.

    Dimension changes along the Z-axis are invisible because the thickness of the element is initially zero. However, applying a value of 0 to the third value makes the element disappear, as does a 0 on the first or second value.

    On the other hand, if the element has been rotated with transform:rotateX(...) or transform:rotateY(...), the dimension change along the axis Z will have a visible effect. This will not be the case if the element has been rotated with the rotate property.

    Échantillon

Common values:

scale: initial (none) scale: inherit scale: revert scale: revertLayer scale: unset

These values ​​are described in more detail on their respective page: initial, inherit, revert, revert-layer, unset.

In the code examples below, the el parameter represents the element on the page that you want to scale.

Animation of the scale property.

As you might expect, the animation of scale can very easily give interesting visual effects.

Demonstration

Manipulating the scale property programmatically.

In the code examples below, the el parameter represents the element on the page that you want to scale.

In Javascript, here's how to change the value of scale. Javascript offers a syntax with an array-type notation, with square brackets, and another syntax closer to the usual object notation.


function setScale(el) {
el.style['scale']='1 2 1';
}
or

function setScale(el) {
el.style.scale='1 2 1';
}

To read the CSS value of scale Javascript also supports two syntaxes. These codes return the value of the property assigned directly to the element, not through a class or other selector. The value returned can be either the word none or the numbers assigned to the property (from 1 to 3), with percentages replaced by the corresponding numerical value.


function getScale(el) {
return el.style['scale'];
}
or

function getScale(el) {
return el.style.scale;
}

To read the computed value of scale in Javascript, use the code below.


function getScale(el) {
return window.getComputedStyle(el).getPropertyValue('scale');
}

With JQuery, here are code examples to change the value or reread the calculated value of the scale property.


function setScale(el) {
$(el).css('scale','1 2 1');
}

function getScale(el) {
return $(el).css('scale');
}

Test it yourself.

The buttons below apply the value to the scale property and then display either the value as applied, or the calculated value. This second option allows you to see how the value of scale is stored (serialized). In particular, we note that the percentages are reduced to coefficients and that the value of Z, if it is equal to 1, is not memorized.

Simulator.

scale :
Result

Browser compatibility.

Browsers now recognize the scale property. The transform property with the scale() function is another well-recognized solution.

Column 1
General support for 2D transformations, including rotations, element translations, and more
Column 2
General support for 3D animations, including support for perspective management and support for the backface-visibility property.
Column 3
Support of the scale/code> property.

Notes:

(1) Does not support 2D transformations on SVG elements. Use the transform attribute instead.

(2) Internet Explorer does not support transform-style:preserve-3d, thus limiting the nesting of animations.

1
2D
transformations
2
3D
transformations
3
scale
property
Estimated overall support.
97%
97%
94%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1
2

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

See Caniuse.com for more compatibility information.
Caniuse
Caniuse
Caniuse

Property scale history.

  • CSS Transforms Module Level 2

    Adding the scale property in addition to the transform property and the scale() function.
    WD
    March 03, 2020
    Working Draft.
    CR
    PR
    REC

See also, concerning transformations.

The CSS Transforms Module contains all the definitions of CSS transformations:

Properties:

backface-visibility
Visibility of the rear side of the element (while it is rotating).
perspective
Langue française
A perspective effect applied to a 3D transformed element.
perspective-origin
Langue française
Position of the observer in the case of a 3D distortion with perspective.
rotate
Defines a rotation to apply to the element.
transform
Applies one or more geometric transformations (rotations, enlargements, etc.).
transform-box
Langue française
Sets the reference box for transformations.
transform-origin
Langue française
Sets the origin point for transformations.
transform-style
Langue française
Defines how elements that undergo a 3D transformation are rendered.
translate
Applies a translation to an element (a linear displacement).

Functions:

matrix()
Applies a composite transformation to an element (translations, rotations...).
matrix3d()
Langue française
Applies a series of 3D transformations to an element.
perspective()
Langue française
Sets the height of the observer in the case of a 3D transformation.
rotate()
Sets a rotation to apply to the element in 2D (in the plane of the screen).
rotate3d()
Defines a 3D rotation to be applied to an element around any axis in 3D.
rotateX()
Defines a rotation of the element around the X-axis (in 3D),
rotateY()
Sets a 3D rotation of the element around the y-axis.
rotateZ()
Sets a rotation of the element around the z-axis.
scale()
Sets a magnification or reduction of the element.
scale3d()
Sets 3D scaling.
scaleX()
Sets X-axis scaling.
scaleY()
Set Y-axis scaling.
scaleZ()
Set Z-axis scaling.
skew()
Sets a tilt of the element along the X and/or Y axes.
skewX()
Sets a tilt of the element along the X-axis.
skewY()
Sets a tilt of the element along the Y-axis.
translate()
Defines a translation (a linear move) to an element.
translate3d()
Defines a 3D translation along one or more of the X, Y, and Z axes.
translateX()
Defines a translation along the X-axis (horizontally).
translateY()
Defines a translation along the Y axis (vertically).
translateZ()
Defines a translation along the Z axis (perpendicular to the screen).