CSS matrix() Function (original) (raw)

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 >

`` < div class = "GFG" >

`` Welcome to GeeksforGeeks

`` </ div >

</ body >

</ html >

Output:

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