Scale(), scaleX(), scaleY() scaleZ() et scale3d() - Scaling CSS functions.

Description of scaling functions.

Description of the scaleX(), scaleY() and scaleZ() functions.

Used with he transform property, these functions define a change in the size of the element (enlarging or shrinking) along one of the axes.

The X axis is horizontal, Y is vertical, and the Z axis is perpendicular to the plane of the screen.

scaleZ() has no visible effect on an element in the screen plane, as this function affects the thickness of the element (Z-axis). Since the latter is equal to 0, multiplying it by any coefficient does not change anything. But if the element is taken out of the screen plane by a translateZ() function for example, the effect of scaleZ() becomes visible.
transform-origin can also make z-axis transformations visible by setting an origin outside the screen plane.
In any case, you also need to apply a perspective effect (with the perspective() function) to see the effect of scaleZ().

See also the following pages:

• transform: the property that allows the transformations to be applied.
• transform-origin : a property that defines the point that will remain fixed during a transformation. by default this point is located in the center of the element.

Description of the scale() function.

The scale() function replaces the scaleX() and scaleY() functions in a single write. It accepts two values or two percents.

Description of the scale3d() function.

The scale3d() function replaces the three functions scaleX(), scaleY(), and scaleZ() in a single write It accepts three values, which can also be percentages.

These fonctions can be used with:

• transform : Applies one or more geometric transformations (rotations, enlargements, etc.).

Syntax of these scaling functions.

In the examples below, the fine-line rectangle represents the original dimensions of the element. The thick line rectangle is the element after it has been transformed.

• transform: scaleX(0.5); transform: scaleY(2); transform: scaleZ(1.5);

  All three functions expect a value that can be a unitless number or a percentage. Percentages are calculated in relation to the original dimension of the element, in the corresponding direction: width for scaleX(), height for scaleY(), and thickness for scaleZ().

  Negative values are accepted and cause the element to be flipped (symmetry).

  transform:scaleX(0.5);
 

  transform:scaleY(1.5);
 

  transform:scaleZ(1.5);
 

  transform-origin:center center -20px; transform:perspective(50px) scaleZ(1.5);
• transform: scale(0.7, 1); x y

  x and y are the coefficients to be used to change the size of the element along the corresponding axis. If only one value is specified, it is applied along both the X and Y axis, This allows the proportions of the element to be preserved.

  These are two unitless numbers that are less than 1 (dimension reduction) or greater (magnification).
  Percentages can be used and are evaluated against the corresponding original dimension.

  Negative values are accepted and cause the element to be flipped (symmetry).

  transform:scale(0.7, 0.8);
• transform: scale3d(0.7, 0.8, 1.5); x y z

  x, y and z are the coefficients to be used to change the size of the element along the corresponding axis. All three values must be indicated.

  These are three unitless numbers that are less than 1 (dimension reduction) or greater than 1 (enlargement).
  Percentages can be used and are evaluated against the corresponding original dimension.

  Negative values are accepted and cause the element to be flipped (symmetry).

  transform:scale(0.7, 0.8, 1.5);
 

  transform-origin:center center 20px; transform:perspective(50px) scale(0.7, 0.8, 1.5);

Simulator.

The simulator also applies the transform-origin:center center 20px property; and inserts the perspective(50px) function in the transform property to make transformations along the Z-axis visible.

Compatibility and support for 2D or 3D transformations.

2D and 3D transformations are correctly handled by current browsers. The scale() function and its derivatives scaleX(), scaleY(), scaleZ() are also well recognized.

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()
function

4

scale3d()
function

Estimated overall support.

97%

97%

96%

96%

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

Caniuse

Historic of scaling functions.

• CSS Transforms Module Level 1

  First level of specification concerning 2D transformations.
  Presentation of the different transformation functions including scale(), scaleX() and scaleY().
  

  February 28, 2012

  Working Draft.

  

  February 14, 2019

  Candidate Recommendation.

  

  

• CSS Transforms Module Level 2

  Level 2 of the Transforms specification, introducing 3D transformations.
  Added scaleZ() and scale3d() functions.
  The 2D functions scale(), scaleX() and scaleY() now accept percentage values.
  

  March 03, 2020

  Working Draft.

  

  

  

See also, concerning transformations.

The CSS Transforms Module contains all the properties and functions related to CSS transformations. The scale() function is described in this module, along with all of the following:

Properties:

backface-visibility

Visibility of the rear side of the element (while it is rotating).

perspective

A perspective effect applied to a 3D transformed element.

perspective-origin

Position of the observer in the case of a 3D distortion with perspective.

rotate

Defines a rotation to apply to the element.

scale

Sets a scaling of the element (magnification or shrinking).

transform

Applies one or more geometric transformations (rotations, enlargements, etc.).

transform-box

Sets the reference box for transformations.

transform-origin

Sets the origin point for transformations.

transform-style

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()

Applies a series of 3D transformations to an element.

perspective()

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.

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).