CSS matrix3d() Function
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" >w3wiki</ h1 > < h2 >CSS matrix3d() function</ h2 > < br >< br > < div class = "GFG" > Welcome to w3wiki </ 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
Contact Us