Skip to content
Related Articles

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

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

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :