CSS matrix() Function
Example
Use matrix() to define a 2D transformation 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 »
More "Try it Yourself" examples below.
Definition and Usage
The CSS matrix() function defines a 2D
transformation, using a matrix of six values.
The matrix() function takes six parameters,
which allows you to rotate, scale, move, and skew elements.
The parameters are as follow: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).
| Version: | CSS Transforms Module Level 1 |
|---|
Browser Support
The numbers in the table specify the first browser version that fully supports the function.
| Function | |||||
|---|---|---|---|---|---|
| matrix() | 1 | 12 | 3.5 | 3.1 | 10.5 |
CSS Syntax
matrix(scaleX(), skewY(), skewX(), scaleY(),
translateX(), translateY())
| Value | Description |
|---|---|
| scaleX() | Required. A number that scales the element's width |
| skewY() | Required. A number (angle) that skews transformation along the Y-axis |
| skewX() | Required. A number (angle) that skews transformation along the X-axis |
| scaleY() | Required. A number that scales the element's height |
| translateX() | Required. A number that moves the element along the X-axis |
| translateY() | Required. A number that moves the element along the Y-axis |
More Examples
Example
Use matrix() to create a 2D transformation for an image:
#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 »
Related Pages
CSS reference: CSS transform property.
CSS reference: CSS matrix3d() function.
CSS tutorial: CSS 2D transforms.
