The matrix() function is an inbuilt function which is used to create a homogeneous 2D transformation matrix.
Syntax:
matrix( a, b, c, d, tx, ty )
Parameters: This function accepts six parameters as mentioned above and described below:
- a, b, c, d: These parameters are used to describe the linear transformation.
- tx: This parameter is used to describe the linear translation on x-axis.
- ty: This parameter is used to describe the linear translation on y-axis.
Below example illustrates the matrix() function in CSS:
Example:
html <!DOCTYPE html> <html> <head> <title> CSS matrix() function </title> <style> body { text-align: center; } h1 { color: green; } .GFG { transform-origin: 0 0; transform: matrix(0.8, 0.8, -0.8, 0.8, 250, -30); font-size: 26px; font-weight: bold; width: 250px; padding: 20px; background: green; color: white; font-family: sans-serif; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>CSS matrix() function</h2> <br> <br> <div class="GFG"> Welcome to GeeksforGeeks </div> </body> </html> Output:
Supported Browsers: The browsers supported by matrix() function are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 9
- Firefox 3.5
- Safari 3.1
- Opera 10.5