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:

<style>
  .rotated {
    transform: matrix3d(0.583333, 0.186887, 0.79044, 0, -0.52022, 0.833333, 0.186887, 0, -0.623773, -0.52022, 0.583333, 0, 0, 0, 0, 1);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated with <code>matrix3d()</code>.
</div>
<div>
  Non-rotated div.
</div>

And here's the same effect using the rotate3d() function:

<style>
  .rotated {
    transform: rotate3d(1,-2,1,60deg);
  }
  div {
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
</style>

<div class="rotated">
  Rotated with <code>rotate3d()</code>.
</div>
<div>
  Non-rotated div.
</div>

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:

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:

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:

<style>
  #myBox {
    transform: rotate3d(1,-2,1,60deg);
    padding: 20px;
    margin: 20px;
    width: 120px;
    background: limegreen;
    color: white;
    font-family: sans-serif;
  }
  output {
    display: block;
    font-family: monospace;
    background: #eee;
    padding: 20px;
  }
</style>

<div id="myBox">
  My Box.
</div>
<output id="output"></output>

<!-- Get the computed value and output it to the output element -->
<script>
  var e = "";
  var style = "";
  e = document.getElementById("myBox");
  style = window.getComputedStyle(e).getPropertyValue("transform");
  document.getElementById("output").innerText=style;
</script>

Official Syntax

The official syntax of the matrix3d() function is as follows:

Possible Values

The matrix3d() function accepts the following sixteen parameters:

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.