CSS matrix() Function
Example
img:hover {
transform: matrix(1.2, 0.2, -1, 0.9, 0, 20);
}
Meaning
The matrix() css function defines a homogeneous 2D transformation matrix.
Note: matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1).
Version: CSS3
Standard Syntax
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Status
Function Arguments
The following table describes the arguments of this function.
| Argument | Description |
|---|---|
| scaleX() | Defines a transformation that resizes an element along the x-axis (horizontally). |
| skewY() | Defines a transformation that resizes an element along the y-axis (vertically). |
| skewX() | Defines a transformation that skews an element in the horizontal direction on the 2D plane. |
| scaleY() | Defines a transformation that skews an element in the vertical direction on the 2D plane. |
| translateX() | Repositions an element horizontally on the 2D plane. |
| translateY() | Repositions an element vertically on the 2D plane. |
More Example
Normal
Changed
Example
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.changed {
transform: matrix(1, 2, -1, 1, 80, 80);
background-color: tomato;
}See also
- transform
- Individual transform properties:
- <transform-function>