# CSS matrix() Function

The CSS `matrix()`

function can be used with CSS transforms to style elements in a two-dimensional space.

The `matrix()`

function is an alternative to the two-dimensional transform functions `rotate()`

, `skew()`

, `scale()`

, and `translate()`

.

In other words, you can use the `matrix()`

function instead of those functions.

Here's an example of using the `matrix()`

function to move a box to the right and rotate it 45 degrees:

And here's the same effect using the `rotate()`

and `translate()`

functions:

## Scaling the Element

Here's an example of using `matrix()`

to scale an element:

And here's the same effect using `scale()`

:

## How does `matrix()`

Work?

Any time you do a CSS transform, you're affecting the matrix. Even if you use another function such as `rotate()`

, you're still affecting the matrix. The matrix determines the coordinates of the element — its position, size, orientation, etc.

If you click the `Computed` tab (or equivalent) within your browser's developer tools, you'll probably find that your 2D transforms are actually represented with the `matrix()`

property, even if you didn't actually use that property.

It's a bit like colors. You might specify a color using the color name because it's easy to remember (for example, `gold`

), but the browser might compute that in its RGB equivalent (e.g. `rgb(255, 215, 0)`

).

There's some quite complex (and well established) math behind the way the matrix coordinates are represented. However, you don't need to be a mathematician in order to gain a basic understanding of how the `matrix()`

function works.

The `matrix()`

function accepts six arguments that determine how the element will be transformed.

The arguments work like this:

`matrix(a, b, c, d, e, f)`

Here's what they're for.

`a`

,`d`

- The arguments
`a`

and`d`

represent how the element is scaled in the`x`and`y`direction respectively (just like in`scale(a, d)`

). `b`

,`c`

- The arguments
`b`

and`c`

represent how the element is skewed (just like in`skew(b, c)`

). `e`

,`f`

- The arguments
`e`

and`f`

represent how the element is translated in the`x`and`y`direction respectively (just like in`translate(e, f)`

).

So, when you create a 2D transform, you could use one of the other 2D transform functions, or you could use the `matrix()`

function with the applicable arguments.

So all of the following lines do the same thing:

```
/* All three lines have the same result */
scale(2);
scale(2, 2);
matrix(2, 0, 0, 2, 0, 0);
```

These make the element appear twice as long in both the `X` and `Y` axes.

The following two lines do the same thing:

```
/* Both lines have the same result */
scale(2, 3);
matrix(2, 0, 0, 3, 0, 0);
```

These make the element appear twice as long in the `X` axis, and three times as long in the `Y` axis.

When you use the `transform`

property (and/or its related properties), the transformation is applied to the coordinate system an element renders in. The final transformation value for a coordinate system is obtained by converting each transform function in the list to its corresponding matrix, then multiplying the matrices.

So if we add a `translate(10px, 20px)`

to the above example, we end up with this:

```
/* Both lines have the same result */
scale(2, 3) translate(10px, 20px);
matrix(2, 0, 0, 3, 20, 60);
```

Or if we add a `rotate(45deg)`

instead, we end up with this:

```
/* Both lines have the same result */
scale(2, 3) rotate(45deg);
matrix(1.41421, 2.12132, -1.41421, 2.12132, 0, 0);
```

So, just as you have a choice in how you apply color to an element, you also have choice in how to apply transforms.

## The Order

It's important to note that the order of your transform functions can make a difference to the resulting matrix. For example, if you use a `translate()`

followed by a `rotate()`

, the resulting matrix will be different than if the `rotate()`

had come first.

Example:

```
/* The functions */
translate(10px, 20px) rotate(60deg);
/* The resulting matrix */
matrix(0.5, 0.866025, -0.866025, 0.5, 10, 20);
```

Switch them around:

```
/* The functions */
rotate(60deg) translate(10px, 20px);
/* The resulting matrix */
matrix(0.5, 0.866025, -0.866025, 0.5, -12.3205, 18.6603)
```

## Calculating the Numbers

Even if you know how `matrix()`

works, that doesn't mean you'll know what values to provide it every time you do a transform. As you've seen, the numbers can get quite complex, and you'll need to be able to calculate each argument in your head if you expect to use it in the same way you code the other translation functions.

Fortunately, there are other options for getting the applicable arguments for the `matrix()`

function:

- One option is to create the transform using the various functions, then get the computed value from your browser's developer tools.
- Another option is to use the
`Window.getComputedStyle()`

method to retrieve the computed value of the`transform`

function.

Here's a quick example of how you can use the `Window.getComputedStyle()`

method:

## Official Syntax

The official syntax of the `matrix()`

function is as follows:

`matrix() = matrix( <number> [, <number> ]{5,5} )`

## Possible Values

The `matrix()`

function accepts the six values `a`

-`f`

. Here's what they represent:

`a`

,`d`

- The arguments
`a`

and`d`

represent how the element is scaled in the`x`and`y`direction respectively (just like in`scale(a, d)`

). `b`

,`c`

- The arguments
`b`

and`c`

represent how the element is skewed (just like in`skew(b, c)`

). `e`

,`f`

- The arguments
`e`

and`f`

represent how the element is translated in the`x`and`y`direction respectively (just like in`translate(e, f)`

).

## CSS Specifications

- The
`matrix()`

function is defined in CSS Transforms Module Level 1 (W3C Working Draft)

## Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.