Skip to main content

CSS matrix3d() Function – How to Create a 3D Transformation Matrix

The CSS matrix3d() function is a shorthand for defining 3D transformations.

In other words, instead of writing:

img {
  transform-origin: 0 0;
  width: 40%;
}

.second-image {
  transform: perspective(350px) translateX(-3px) translateZ(130px) rotate(40deg)
    scaleX(1.2) scaleY(0.9) skewX(10deg) skewY(35deg);
}

Try Editing It

You can alternatively use the matrix3d() function to shorten your code like so:

img {
  transform-origin: 0 0;
  width: 40%;
}

.second-image {
  transform: matrix3d(
    0.627673,
    1.34933,
    0,
    0,
    -0.41642,
    0.825449,
    0,
    0,
    0,
    0,
    1,
    -0.00285714,
    -3,
    0,
    130,
    0.628571
  );
}

Try Editing It

The CSS matrix3d() Function's Syntax​

The matrix() function accepts 16 values. Here's the syntax:

matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p)

You can represent the CSS matrix's values as homogeneous coordinates on ℝℙ3 like so:

(aeimbfjncgkodhlp)\begin{pmatrix} a & e & i & m\\ b & f & j & n\\ c & g & k & o\\ d & h & l & p \end{pmatrix}
note
  • The values a to l are numbers describing an element's linear transformation.
  • m, n, o, and p are numbers describing an element's translation transformation.

Tools for Converting Transform Functions to matrix3d()​

The two tools you can use to do a quick conversion of transform functions to matrix3d() are:

  • JavaScript's window.getComputedStyle() method
  • Eric Meyer and Aaron Gustafson's matrix resolution tool

How to use window.getComputedStyle() to convert transform functions to matrix3d()​

Suppose you want to convert the following transform functions to matrix:

img {
  transform-origin: 0 0;
  width: 40%;
}

.second-image {
  transform: perspective(350px) translateX(-3px) translateZ(130px) rotate(40deg)
    scaleX(1.2) scaleY(0.9) skewX(10deg) skewY(35deg);
}

You will add an id attribute to the image element.

<img
  class="first-image"
  src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
  alt=""
/>
<img
  class="second-image"
  src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
  alt=""
  id="second-image"
/>

Then, in JavaScript, you will:

  1. Use the id attribute to get the image element.
  2. Use the window.getComputedStyle() method to get the image's transform property's value.

Here's the code:

// Get the image element by its id name:
const image = document.getElementById("second-image");

// Get the image element's transform property's value:
const matrix = window.getComputedStyle(image).getPropertyValue("transform");

// Log the matrix variable's value to the console:
console.log(matrix);

Try Editing It

Browsers, by default, convert a CSS transform property's value to its matrix equivalent. So, the snippet above returned the image's computed value.

Let's now discuss the second conversion tool.

How to use the matrix resolutions tool to convert transform functions to matrix3d()​

Suppose you want to convert the following transform functions to matrix:

img {
  transform-origin: 0 0;
  width: 40%;
}

.second-image {
  transform: perspective(350px) translateX(-3px) translateZ(130px) rotate(40deg)
    scaleX(1.2) scaleY(0.9) skewX(10deg) skewY(35deg);
}

You will do the following:

  1. Go to The Matrix Resolutions website: https://meyerweb.com/eric/tools/matrix/.
  2. Paste your transform functions into the first text field.
  3. Click "The Red Pill" button to generate the transform functions' matrix equivalence.

The matrix resolutions tool&#39;s screenshot

Click the red pill button to convert CSS transform functions to a matrix3d() function

tip

Use matrix() to create a 2D transformation matrix.

Overview​

This article discussed what a CSS matrix3d() function is. We also used examples to see how it works.

Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.

Tweet this article