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