The `matrix()`

function is a 2D transform function used to specify a two-dimensional transformation matrix.

It can be used to combine several transformations into one. For example, instead of using two (or more) transform functions (see above) in one declaration like so:

transform: rotate(45deg) translate(24px,25px);

Using the `matrix()`

function, we can combine these two transformations into one matrix:

transform: matrix(0.7071067811865476, 0.7071067811865475, -0.7071067811865475, 0.7071067811865476, -0.7071067811865426, 34.648232278140824);

As you can see, calculating the values of the `matrix()`

function wouldn’t be easy if you’re not math-savvy. These calculations were also probably not meant to be done by hand. Luckily, Eric Meyer and Aaron Gustafson created a very useful tool which can do the calculations for you—all you do is enter the transformations you want and the click the red button for the tool to generate the equivalent `matrix()`

function for you.

The official syntax looks as follows:

transform: matrix( <number> [, <number> ]{5,5} )

For understanding how to use the transform function, you can read the CSS Transform entry.

## Browser Support

The following is the support table for two-dimensional CSS transformations:

### CSS3 2D Transforms

Method of transforming an element including rotating, scaling, etc. Includes support for `transform` as well as `transform-origin` properties.

W3C Working Draft

Supported from the following versions:

#### Desktop

- 36
- 16
- 10
- 12
- 9

#### Mobile / Tablet

- 9.0
- 56
- No
- 61
- 55