Matrix() - Function CSS

Description of the matrix() function.

The function matrix() calculates a composite transformation on an element. This transformation can involve translations, rotations, scaling, or inclinations. matrix() can therefore replace all other transformation functions: translate(), rotate(), scale(), and skew(). However, its use is more complex than that of the separate functions, particularly in determining the values of the parameters.

All transformations are serialized (stored) in the form matrix().

The matrix() value can be used with the following properties:

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

Syntaxes of the matrix() function..

• transform: matrix(1, 0, 0, 1, 0, 0); a b c d e f

  The parameters, from a to f are six dimensionless numbers.

  1. a and d define the scaling ratios, respectively in the horizontal and vertical directions.
     Between 0 and 1, they reduce the size of the element; greater than 1, they enlarge it. Negative values are accepted and cause a mirror effect on the element.
     
     Scaling an element (zoom effect) corresponds to the work of the property scale() and its derivatives.
     
     Examples: matrix(2,0,0,1,0,0) doubles the width of the element.
     matrix(-1,0,0,1,0,0) flips the element horizontally.
      
  2. b and c define the tilts applied to the element (we can also talk about shear forces). If these two values are set to 0, no deformation will be applied. Negative values are accepted.
     
     To better understand the effect of these two parameters, test the simulator below by specifying only one of the two values each time. For example, try the following values:
     matrix(1, 0.25, 0, 1, 0, 0)
matrix(1, 0, 0.25, 1, 0, 0)
      
  3. e and f define a translation that will be applied to the element, respectively in the horizontal direction and in the vertical direction. Negative values are allowed.
     
     Test the following syntaxes in the simulator below:
     matrix(1, 0, 0, 1, 100, 0)
matrix(1, 0, 0, 1, 0, 50)
      

  Note: the rotation of the element is done by a combination of scaling and tilting parameters. For example, to rotate the element by an angle a, use the following values:
  matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0)
  
  This results in 30°:
  matrix(0.87, 0.5, -0.5, 0.87, 0, 0)
   

Mathematical explanation.

If matrix calculation is not your cup of tea, you can easily skip this explanation. For others, know that the matrix() function performs the multiplication of a 3x3 matrix created with the function's parameters and a vector composed of the xy coordinates of a point. A vector containing the new coordinates of the point is then obtained. This calculation is performed for each corner of the element.

• x and y are the original coordinates of the point.
• x' and y' are the final coordinates of the point (after transformation).
• scx, skx, sky, scy, trx, try are the values passed as parameters to the function matrix().

Matrix calculation gives the following formulas for the computation. The multiplication symbol is the dot, to avoid confusion with x.

• x' = scx . x + sky . y + trx
• y' = skx . x + scy . y + try

Simulator.

The simulator below provides you with the parameters of the function matrix() equivalent to a basic transformation (translation, rotation, etc.). It does not allow for the accumulation of multiple basic transformations, which is normally possible.

Browsers compatibility with matrix() function.

Currently, the vast majority of browsers handle the function matrix() correctly as well as all 2D transformations.

Notes:

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

1

2D
transformations

2

matrix()
function

Estimated overall support.

97%

96%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

1

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

Historic of the matrix() function.

• CSS Transforms Module Level 1

  First level of specification concerning 2D transformations.
  Presentation of different transformation functions such as matrix().
  

  February 28, 2012

  Working Draft.

  

  February 14, 2019

  Candidate Recommendation.

  

  

• CSS Transforms Module Level 2

  Level 2 of the Transforms specification, introducing 3D transformations.
  Adding matrix3d() function.
  No change directly concerning the matrix() function.
  

  March 03, 2020

  Working Draft.

  

  

  

See also, regarding the transformations.

The W3C organizes the CSS specifications into modules. TheCSS Transforms Module encompasses all the properties and functions concerning transformations in CSS:

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:

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.

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