matrix()

The matrix() function combines all of the two-dimensional (2D) transform property functions into a single CSS declaration. It covers the translate(), skew(), and scale() functions. It also supports the functions for specifying each of those individually, which include scaleX(), skewY(), skewX(), scaleY(), translateX(), and translateY().

So, in all, matrix()accepts six arguments, one for each of the transform functions.

.box {
  /* Default: no transform */
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.box.transformed {
  /* Scaled by 1.5x and translated 50px right, 30px down */
  transform: matrix(1.5, 0, 0, 1.5, 50, 30);
}

It allows you to rotate, scale, move, and skew elements. Although not explicitly defined, the matrix() function fully encompasses all 2D transformations, including rotation. However, to achieve the same as the rotate() function, we need to combine the skew-related parameters.

Syntax

<matrix()> = matrix( <number>#{6} )

Arguments

The matrix() function takes exactly six arguments, all of type <number>, so they can either be an integer or decimal. In simpler terms, the syntax could be written as follows:

transform: matrix(a, b, c, d, tx, ty);

• a, d: Scaling factors for the x-axis (a) and y-axis (d) (e.g. 1 equals no scaling while 2 equals 2x scale).
• b, c: Skew factors for shearing along the y-axis (b) and x-axis (c).
• tx, ty: Translation (movement) along the x-axis (tx) and y-axis (ty) (while written as <number>, they represent a translation in pixels).

Should you use the matrix() function?

The matrix() function is a powerful CSS tool that allows you to apply 2D transformations to elements using a six-value matrix: matrix(a, b, c, d, tx, ty), so it can handle scaling, rotation, skewing, and translation in one go.

Despite its power, the matrix() function is often overlooked since its parameters look arbitrary. For instance, parameters a and d, which are, by default, scale parameters, have their functions extended when rotation or skew is involved. Also, rotating an element by an angle, like 45° requires calculating its Cartesian coordinates using a = cos(45°) and b = sin(45°) (with adjustments for c and d), which is not as straightforward as declaring one function at a time via the transform property, e.g., transform: rotate(45deg).

Basic usage

There are a number of ways to use matrix(). We will go over various techniques for translation, scaling, skewing, and rotating.

Replicating translate()

The tx and ty parameters of the matrix() function parameters are responsible for translation. You can manipulate them to move the element in the x-axis, the y-axis, or both.

.box {
    transition: transform 0.3s ease;
    transform: matrix(1, 0, 0, 1, 0, 0);
}

.box.transformed {
    transform: matrix(1, 0, 0, 1, 50, 30); /* Translate 50px right, 30px down */
}

The matrix() translation mimics translate(50px, 30px). The tx = 50 and ty = 30 values handle the x and y movement, while a = 1, d = 1 and b = 0, c = 0 preserve the original size and shape.

Replicating scale()

Just like the matrix() translation above, setting a value less than or greater than 1 to the a and d parameters cause an element to scale up or down, like how transform: scale(1.5, 2.0) works, where the first argument is for the x-axis and the second is for the y-axis.

.box {
    transition: transform 0.3s ease;
    transform: matrix(1, 0, 0, 1, 0, 0);
}

.box.transformed {
    transform: matrix(1.5, 0, 0, 1.5, 0, 0); /* Scale 1.5x on both axes */
}

The matrix() scale matches scale(1.5). The a = 1.5 and d = 1.5 work together to scale the width and height, respectively, while b = 0, c = 0, and tx = 0, ty = 0 keeps the original skewing and translation of the element.

Replicating skew()

Among the matrix() parameters, the skew transform takes c and b for the transform: skew(x, y); where the c and b represents skewing along the x-axis and y-axis, respectively. In the snippet below, the box will only be skewed along the x-axis, so the b parameter, alongside others, will remain in their constant values.

.box {
  transition: transform 0.3s ease;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.box.transformed {
  transform: matrix(1, 0, 0.5, 1, 0, 0); /* Skew 26.6° along x-axis */
}

The above example mimics skew(26.6deg). The c = 0.5 (tan 26.6°) skews along the x-axis, while a = 1, d = 1, b = 0, and tx = 0, ty = 0 keep other properties intact.

Replicating rotate()

Although the rotate() function is not explicitly among the matrix() parameters, it can still be achieved converting the trigonometric value of the degree to decimals or integers using sine and cosine, but only for the a, b, c, and d parameters.

.box {
  transition: transform 0.3s ease;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.box.transformed {
  transform: matrix(0.707, 0.707, -0.707, 0.707, 0, 0); /* Rotate 45° */
}

The above matrix() technique replicates rotate(45deg). The values a = 0.707 (cos 45°), d = 0.707, b = 0.707 (sin 45°), and c = -0.707 (-sin 45°) are combined to derive the rotation, while tx and ty are left as 0, 0, respectively to keep them constant.

Exploring the Power of matrix()

Now that we’ve replicated the regular transform property functions with the matrix() function, we can now take matrix() for a spin.

Combing all functions together

You can combine scale, translate, and skew into a single matrix() animation as in the code sample below:

@keyframes transformAnimation {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }

  100% {
    transform: matrix(1.2, 0.3, -0.3, 1.2, 50, 30);
  }
}

.box.animated {
  animation: transformAnimation 2s infinite alternate;
}

This animates a combination of scaling (1.2x), skewing (0.3, -0.3), and translation (50px, 30px).

Multi-element choreography

You can create a swapping animation, where 2 boxes swap their initial position with one another, in a single matrix() declaration.

.box {
  transition: transform 0.3s ease;
}

.box1 {
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.box2 {
  transform: matrix(1, 0, 0, 1, 150, 0);
}

.moved .box1 {
  transform: matrix(1, 0, 0, 1, 150, 0);
}

.moved .box2 {
  transform: matrix(1, 0, 0, 1, 0, 0);
}

The two boxes swap positions by switching the matrix()function’s tx values.

Specification

The matrix() function is defined in the CSS Transforms Module Level 1 specification, which is currently in Editor’s Draft.

Browser support

The matrix() function is widely supported across modern browsers, making it a reliable choice for 2D transformations. It’s been around since the early days of CSS transforms, so you’re good to go on most platforms. However, older versions of IE (9-11) require the -ms- prefix, so you might see -ms-transform: matrix(1, 0, 0, 1, 10, 20) in legacy contexts. Most modern browsers handle the unprefixed version just fine, so you can skip the prefix unless you’re supporting IE 9-11 specifically.

Related