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 4x4 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 `

<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> 

GeeksforGeeks

CSS matrix3d() function

    <div class="GFG">
        Welcome to GeeksforGeeks
    </div> 
</center>

`

Output:

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

• Google Chrome 12
• Edge 12
• Internet Explorer 10
• Firefox 10
• Safari 4
• Opera 15