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:

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:

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

The following two lines do the same thing:

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:

Or if we add a rotate(45deg) instead, we end up with this:

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:

Switch them around:

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:

Possible Values

The matrix() function accepts the six number 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.