CSS transform: matrix()

The CSS matrix() function is used to define the transform property, to scale, skew, and translate an element on both x and y-axis, at once. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 120px; height: 60px; background: peru; margin: auto;}
      .mat{transform: matrix(1.4, 1.3, 0.4, 1.1, 10, 40);} 
      
   </style>
</head>
<body>
   
   <h2>Without matrix()</h2>
   <div class="normal"></div>

   <h2>matrix(1.4, 1.3, 0.4, 1.1, 10, 40)</h2>
   <div class="mat"></div>
   
</body>
</html>

Output

Without matrix()

matrix(1.4, 1.3, 0.4, 1.1, 10, 40)

CSS matrix() Syntax

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

transform: matrix(a, b, c, d, e, f);

Note - The value of all six parameters (a, b, c, d, e, f) may be a positive, zero, or a negative number.

Each parameters refers to different transform functions, that are:

a refers to scaleX()
b refers to skewY()
c refers to skewX()
d refers to scaleY()
e refers to translateX()
f refers to translateY()

Therefore, the general form of matrix() function can also be written as:

transform: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

Note - The matrix(a, b, c, d, e, f) is equal to (or shorthand for) matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, e, f, 0, 1). The detailed description of matrix3d() function is given in its separate tutorial.

CSS matrix() Example

HTML with CSS Code

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

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

   <h2>matrix(2, 0.3, 0, 1, 0, 0)</h2>
   <div class="c"></div>

   <h2>matrix(2, 0.3, 0.6, 1, 0, 0)</h2>
   <div class="d"></div>

   <h2>matrix(2, 0.3, 0.6, 1, -40, 0)</h2>
   <div class="e"></div>
   
   <h2>matrix(2, 0.3, 0.6, 1, -40, 40)</h2>
   <div class="f"></div>
   
</body>
</html>