The matrix() function in CSS is a part of the CSS Transform module, and it allows you to perform complex transformations like translation, rotation, scaling, and skewing, all in one function. This function is particularly powerful because it directly manipulates the transformation matrix, which is the mathematical representation of these transformations.
Understanding the matrix() Function
The matrix() function takes six values as parameters, representing a 2D transformation matrix. These values are:
Syntax
matrix(a, b, c, d, e, f)
These parameters correspond to the following:
1. a and d: These control scaling.
· a is the scaling factor in the X direction (horizontal).
· d is the scaling factor in the Y direction (vertical).
2. b and c: These control skewing.
· b is the skewing factor in the Y direction.
· c is the skewing factor in the X direction.
3. e and f: These control translation (moving).
· e is the translation (moving) factor in the X direction (horizontal).
· f is the translation (moving) factor in the Y direction (vertical).
Example
transform: matrix(2, 0.5, 0, 1.5, 100, 50);
· a = 2 (scaling X by 2)
· b = 0.5 (skewing Y by 0.5)
· c = 0 (no skewing in the X direction)
· d = 1.5 (scaling Y by 1.5)
· e = 100 (translation X by 100 pixels)
· f = 50 (translation Y by 50 pixels)
matrix.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .transform-box { width: 100px; height: 100px; background-color: lightblue; } .transform-box:hover{ transform: matrix(2, 0.5, 0, 1.5, 100, 50); } </style> <title>CSS Matrix Transformation Example</title> </head> <body> <div class="transform-box"></div> </body> </html>
Above snippet generate below box.
Hover the mouse, you can see that the widget will change like below.
Previous Next Home
No comments:
Post a Comment