CSS transform: matrix3d()

The CSS matrix3d() function is used to define the transform property, to apply a 3D transformation as a 4x4 homogeneous matrix, to an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 60px; background: peru; margin: auto;}
      .mat{transform: matrix3d(1, 0, 0, 0.008, 0, 1, 0, 0.008, 0, 0, 1, 0, 0, 0, 0, 1);}
   </style>
</head>
<body>
   
   <h2>Without matrix3d()</h2>
   <div class="normal"></div>

   <h2>matrix3d(1, 0, 0, 0.008, 0, 1, 0, 0.008, 0, 0, 1, 0, 0, 0, 0, 1)</h2>
   <div class="mat"></div>
   
</body>
</html>

Output

Without matrix3d()

matrix3d(1, 0, 0, 0.008, 0, 1, 0, 0.008, 0, 0, 1, 0, 0, 0, 0, 1)

Basically the matrix3d() function is used to apply single or multiple transformation to an element. That is, using this function, we can apply multiple transform functions, at once.

CSS matrix3d() Syntax

The syntax of matrix3d() function in CSS, is:

transform: matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4);

There are 16 parameters or values, that are in column-major order. Therefore, the parameters as matrix elements will be:

The first 12 values are used to define the liner transformation. Whereas the last 4 values are used to apply the translation.

Note - We can use either positive, zero, or negative number to define these 16 values.

In above general form of matrix3d() function, here are the list of parameters used to apply transform functions:

a1 refers to scaleX()
b1 refers to skewY()
a2 refers to skewX()
b2 refers to scaleY()
c3 refers to scaleZ()
a4 refers to translateX()
b4 refers to translateY()
c4 refers to translateZ()

The remaining parameters are c1, d1, c2, d2, a3, b3, d3, and d4, that are demonstrated in following three examples. The first example demonstrates d1 and d2, second example demonstrates d4, and the third example demonstrates c1, c2, a3, b3, and d3 parameters, one by one.

CSS matrix3d() Example No.1

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 60px; background: peru; margin: auto;}
      .a{transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}
      .b{transform: matrix3d(1, 0, 0, 0.01, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}
      .c{transform: matrix3d(1, 0, 0, -0.01, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}
      .d{transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0.01, 0, 0, 1, 0, 0, 0, 0, 1);}
      .e{transform: matrix3d(1, 0, 0, 0, 0, 1, 0, -0.01, 0, 0, 1, 0, 0, 0, 0, 1);}
   </style>
</head>
<body>
   
   <h2>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)</h2>
   <div class="a"></div>

   <h2>matrix3d(1, 0, 0, 0.01, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)</h2>
   <div class="b"></div>

   <h2>matrix3d(1, 0, 0, -0.01, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)</h2>
   <div class="c"></div>

   <h2>matrix3d(1, 0, 0, 0, 0, 1, 0, 0.01, 0, 0, 1, 0, 0, 0, 0, 1)</h2>
   <div class="d"></div>

   <h2>matrix3d(1, 0, 0, 0, 0, 1, 0, -0.01, 0, 0, 1, 0, 0, 0, 0, 1)</h2>
   <div class="e"></div>
   
</body>
</html>

Output

matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

matrix3d(1, 0, 0, 0.01, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

matrix3d(1, 0, 0, -0.01, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

matrix3d(1, 0, 0, 0, 0, 1, 0, 0.01, 0, 0, 1, 0, 0, 0, 0, 1)

matrix3d(1, 0, 0, 0, 0, 1, 0, -0.01, 0, 0, 1, 0, 0, 0, 0, 1)

CSS matrix3d() Example No.2

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 60px; background: peru; margin: auto;}
      .a{transform: perspective(400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}
      .b{transform: perspective(400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.1);}
      .c{transform: perspective(400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2.3);}
      .d{transform: perspective(400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.6);}
   </style>
</head>
<body>
   
   <h2>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)</h2>
   <div class="a"></div>

   <h2>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.1)</h2>
   <div class="b"></div>

   <h2>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2.3)</h2>
   <div class="c"></div>

   <h2>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.6)</h2>
   <div class="d"></div>
   
</body>
</html>

Output

matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1.1)

matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2.3)

matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.6)

The perspective() function is used to set the distance between the user and the z=0 plane. Since some transformation like on z-axis, can not be seen on the 2D plane, therefore we need to place the view, front or back from the z=0 plane, as done using perspective() in above example.

CSS matrix3d() Example No.3

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 60px; background: peru; margin: auto;}
      .a{transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);}
      .b{transform: perspective(400px) matrix3d(1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) rotateY(-45deg);}
      .c{transform: perspective(400px) matrix3d(1, 0, 4, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1) rotateY(-45deg);}
      .d{transform: perspective(400px) matrix3d(1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1) rotateY(-45deg);}
      .e{transform: perspective(400px) matrix3d(1, 0, 0, 0, 0, 1, 4, 0, 0, 0, 1, 0, 0, 0, 0, 1) rotateY(-45deg);}
      .f{transform: perspective(400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1) rotateY(-45deg);}
      .g{transform: perspective(400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 3, 0, 1, 0, 0, 0, 0, 1) rotateY(-45deg);}
      .h{transform: perspective(400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0.4, 1, 0, 0, 0, 0, 1) rotateY(-45deg);}
      .i{transform: perspective(400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 1.2, 1, 0, 0, 0, 0, 1) rotateY(-45deg);}
      .j{transform: perspective(400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0.014, 0, 0, 0, 1) rotateY(-45deg);}
      .k{transform: perspective(400px) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0.02, 0, 0, 0, 1) rotateY(-45deg);}
   </style>
</head>
<body>
   
   <h2>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)</h2>
   <div class="a"></div>

   <h2>matrix3d(1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)</h2>
   <div class="b"></div>

   <h2>matrix3d(1, 0, 4, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)</h2>
   <div class="c"></div>

   <h2>matrix3d(1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1)</h2>
   <div class="d"></div>

   <h2>matrix3d(1, 0, 0, 0, 0, 1, 4, 0, 0, 0, 1, 0, 0, 0, 0, 1)</h2>
   <div class="e"></div>

   <h2>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1)</h2>
   <div class="f"></div>

   <h2>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 3, 0, 1, 0, 0, 0, 0, 1)</h2>
   <div class="g"></div>

   <h2>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0.4, 1, 0, 0, 0, 0, 1)</h2>
   <div class="h"></div>

   <h2>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 1.2, 1, 0, 0, 0, 0, 1)</h2>
   <div class="i"></div>

   <h2>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0.014, 0, 0, 0, 1)</h2>
   <div class="j"></div>

   <h2>matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0.02, 0, 0, 0, 1)</h2>
   <div class="k"></div>
   
</body>
</html>

Output

matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

matrix3d(1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

matrix3d(1, 0, 4, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

matrix3d(1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1)

matrix3d(1, 0, 0, 0, 0, 1, 4, 0, 0, 0, 1, 0, 0, 0, 0, 1)

matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 0, 0, 1)

matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 3, 0, 1, 0, 0, 0, 0, 1)

matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0.4, 1, 0, 0, 0, 0, 1)

matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 1.2, 1, 0, 0, 0, 0, 1)

matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0.014, 0, 0, 0, 1)

matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0.02, 0, 0, 0, 1)

Note - The rotateY() function is used to rotate an element along y-axis. This function along with perspective() is used in above example, so that the transformation can easily be spotted, as done primarily using matrix3d().

You can use matrix3d() function to apply any type of transformation, using multiple parameter values.

CSS Online Test

« Previous Tutorial Next Tutorial »