CSS matrix3d() Function
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:
- Google Chrome 12
- Edge 12
- Internet Explorer 10
- Firefox 10
- Safari 4
- Opera 15
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...