CSS matrix3d() Function (original) (raw)

Last Updated : 07 Jun, 2023

The matrix3d() function is an inbuilt function which is used to apply a transformation to create a 3D transformation as a 4×4 homogeneous matrix.

Syntax:

matrix3d( a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4 )

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

a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, d4: These parameters are used to hold the value for linear transformation.
a4, b4, c4: These parameters are used to hold the value of translation.

Below example illustrates the matrix3d() function in CSS:

Example:

html

<!DOCTYPE html>

< html >

< head >

`` < title >

`` CSS matrix3d() function

`` </ title >

`` < style >

`` .GFG {

`` transform: matrix3d(

`` 0.6, 0.1, 0.7, 0,

`` -0.5, 0.8, 0.1, 0,

`` -0.6, -0.5, 0.5, 0,

`` 0, 0, 0, 1

`` );

`` font-size:26px;

`` font-weight:bold;

`` width:250px;

`` padding:20px;

`` background: green;

`` color: white;

`` font-family: sans-serif;

`` }

`` </ style >

</ head >

< body >

`` < center >

`` < h1 style = "color:green" >GeeksforGeeks</ h1 >

`` < h2 >CSS matrix3d() function</ h2 >

`` < br >< br >

`` < div class = "GFG" >

`` Welcome to GeeksforGeeks

`` </ div >

`` </ center >

</ body >

</ html >

Output:

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