Related Articles

# CSS | matrix3d() Function

• Last Updated : 21 Aug, 2019

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``> ``<``head``> ``    ``<``title``>``        ``CSS matrix3d() function``        `` ``         ` `    ``<``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;``        ``} ``    `` ``     ` ` `` ` `<``body``> ``    ``<``center``>``        ``<``h1` `style``=``"color:green"``>GeeksforGeeks ``        ``<``h2``>CSS matrix3d() function ``        ``<``br``><``br``> ``     ` `        ``<``div` `class``=``"GFG"``>``            ``Welcome to GeeksforGeeks``        `` ``    ```` `` ` `                    `

Output:

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