# 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:

$\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.
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.