CSS matrix() Function

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>

Output:

Supported Browsers: The browsers supported by matrix() function are listed below:

Google Chrome 1
Edge 12
Internet Explorer 9
Firefox 3.5
Safari 3.1
Opera 10.5

Article Tags :

CSS

Web Technologies

CSS-Functions