CSS matrix() Function

Previous Page CSS log() function
Next Page CSS matrix3d() function
Go to the Previous Level CSS Function Reference Manual

Definition and Usage

CSS matrix() The function defines a two-dimensional transformation by including a matrix of six values.

matrix() The function accepts six parameters that allow you to perform rotation, scaling, moving, and skewing operations on elements.

Parameters are as follows: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).

Example

Example 1

Using matrix() Define two-dimensional transformations for several <div> elements:

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

Try It Yourself

Example 2

Using matrix() Create two-dimensional transformations for images:

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

Try It Yourself

CSS Syntax

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

Value	Description
scaleX()	Required. A number used to scale the width of the element.
skewY()	Required. A number (angle) used to skew elements along the Y-axis.
skewX()	Required. A number (angle) used to skew elements along the X-axis.
scaleY()	Required. A number used to scale the height of the element.
translateX()	Required. A number used to move elements along the X-axis.
translateY()	Required. A number used to move elements along the Y-axis.