CSS matrix() Function

Last Updated : 07 Jun, 2023

The matrix() function is an inbuilt function which is used to create a homogeneous 2D transformation matrix.

Syntax:

matrix( a, b, c, d, tx, ty )

Parameters: This function accepts six parameters as mentioned above and described below:

a, b, c, d: These parameters are used to describe the linear transformation.
tx: This parameter is used to describe the linear translation on x-axis.
ty: This parameter is used to describe the linear translation on y-axis.

Below example illustrates the matrix() function in CSS:

Example:

html

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
      CSS matrix() function 
  </title> 
    <style> 
        body { 
            text-align: center; 
        } 
          
        h1 { 
            color: green; 
        } 
          
        .GFG { 
            transform-origin: 0 0; 
            transform: matrix(0.8, 0.8, -0.8, 0.8, 250, -30); 
            font-size: 26px; 
            font-weight: bold; 
            width: 250px; 
            padding: 20px; 
            background: green; 
            color: white; 
            font-family: sans-serif; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <h2>CSS matrix() function</h2> 
    <br> 
    <br> 
  
    <div class="GFG"> 
      Welcome to GeeksforGeeks 
  </div> 
</body> 
  
</html> 