# CSS matrix3d() Function

The CSS `matrix3d()`

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

The `matrix3d()`

function is an alternative to the three-dimensional transform functions `rotate3d()`

, `rotateX()`

, `rotateY()`

, `rotateZ()`

, `translate3d()`

, `translateZ()`

, `scale3d()`

, `scaleZ()`

, and `perspective()`

.

In other words, you can use one `matrix3d()`

function instead of a whole bunch of those other functions.

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

function to rotate a box in a three-dimensional space:

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

function:

The above `matrix3d()`

example probably looks like a bunch of meaningless numbers if you don't know how it works. It probably looks like a bunch of meaningless numbers even if you *do* know how it works!

But if you understand how it works, you'll know that the numbers aren't so meaningless.

## How does `matrix3d()`

Work?

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

, you're still affecting the matrix. The matrix determines the coordinates of the element — its position, size, orientation, etc. These are all represented by sixteen `number` values.

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

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, `blue`

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

).

The `matrix3d()`

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

The arguments work like this:

`matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4)`

Here's what they're for.

`a1`

,`b1`

,`c1`

,`d1`

,`a2`

,`b2`

,`c2`

,`d2`

,`a3`

,`b3`

,`c3`

,`d3`

,`d4`

- These arguments are a number that describe the linear transformation.
`a4`

,`b4`

,`c4`

- These arguments are a number that describe the translation to apply.

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

function with the applicable arguments.

Here's an example of how `rotateY()`

and `rotateX()`

affect the matrix:

```
/* RotateY */
rotateY(30deg);
matrix3d(0.866025, 0, -0.5, 0, 0, 1, 0, 0, 0.5, 0, 0.866025, 0, 0, 0, 0, 1);
/* RotateX */
rotateX(30deg);
matrix3d(1, 0, 0, 0, 0, 0.866025, 0.5, 0, 0, -0.5, 0.866025, 0, 0, 0, 0, 1);
```

So each function results in a different value for the matrix.

## Calculating the Numbers

Even if you know how `matrix3d()`

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 `matrix3d()`

function that don't require a degree in mathematics:

- 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 `matrix3d()`

function is as follows:

`matrix3d() = matrix3d( <number> [, <number> ]{15,15} )`

## Possible Values

The `matrix3d()`

function accepts the following sixteen parameters:

`matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4)`

Here's a brief explanation:

`a1`

,`b1`

,`c1`

,`d1`

,`a2`

,`b2`

,`c2`

,`d2`

,`a3`

,`b3`

,`c3`

,`d3`

,`d4`

- These arguments are a
`number`that describe the linear transformation. `a4`

,`b4`

,`c4`

- These arguments are a
`number`that describe the translation to apply.

## CSS Specifications

- The
`matrix3d()`

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.