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:

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>
Output

matrix(1, 0, 0, 1, 0, 0)

matrix(2, 0, 0, 1, 0, 0)

matrix(2, 0.3, 0, 1, 0, 0)

matrix(2, 0.3, 0.6, 1, 0, 0)

matrix(2, 0.3, 0.6, 1, -40, 0)

matrix(2, 0.3, 0.6, 1, -40, 40)

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!