matrix() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The matrix() CSS function is a powerful way to apply a two-dimensional transformation to an element by directly specifying the components of a 2×3 transformation matrix. It allows you to combine multiple transform operations - such as rotate(), scale(), skew(), and translation - into a single function. This can be especially useful when you want precise control over how an element is manipulated in both the X and Y directions simultaneously.

A matrix() transformation is defined by six values: matrix(a, b, c, d, e, f). Each value corresponds to a specific part of the transformation:

a and d control scaling along the X and Y axes.
b and c control the skewing along the X and Y axes.
e and f define translation along the X and Y axes, similar to using the translate property.

By adjusting these six numbers, you can replicate the effect of combining multiple transforms in a single call. For instance, instead of applying separate rotate() and scale() functions, you can compute their matrix equivalent and apply it with matrix().

Example usage:

div {
  transform: matrix(1, 0.5, -0.5, 1, 100, 50);
}

In this example, the element will be skewed diagonally, scaled normally (since a and d are 1), and translated 100px along the X-axis and 50px along the Y-axis. This approach gives more fine-grained control than applying multiple transforms separately.

Unlike shorthand functions like matrix3d(), matrix() is limited to two-dimensional transformations, but it is still highly flexible for complex 2D layout and animation effects. It can be combined with other CSS properties like transition or animation to create smooth, dynamic transformations on div elements or any other HTML elements.

Syntax

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

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

Values

<number>
The matrix() function accepts the six number values a-f. Here is 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)).

Example

HTML

<div class="container">

  <div class="transformed-box">Matrix</div>

</div>

CSS

/* Centering the demo */

.container {

  width: 200px;

  height: 200px;

  border: 2px dashed #ccc;

  margin: 50px;

}



.transformed-box {

  width: 100px;

  height: 100px;

  background-color: #3498db;

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  font-family: sans-serif;

  font-weight: bold;



  /* matrix(scaleX, skewY, skewX, scaleY, translateX, translateY) */

  transform: matrix(1.2, 0.2, -0.2, 1.2, 50, 0);

  

  transition: transform 0.3s ease;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS matrix() function. Hover over a browser icon to see the version that first introduced support for this CSS function.