CSS 2D Transforms
In CSS, a transformation is used to change the shape, size, and position of an element. It changes the elements along the X and Y axes. The following are the six major types of transformation:
- translate()
- rotate()
- scale()
- scaleX()
- scaleY()
- skew()
- skewX()
- skewY()
- matrix()
We will use examples to implement all of these functions and learn about their concepts.
1. translate():
The translate() method is used to move the element along the X and Y axes from its current position.
2. rotate():
The rotate() method rotates an element clockwise or counterclockwise by a specified degree. The degree is indicated in parenthesis.
3. scale():
It is used to increase or decrease the size of an element based on the width and height parameters.
4. scaleX():
method increases or decreases the width of an element.
5. scaleY():
method increases or decreases the height of an element.
6. skew():
method skews an element in the given angle along the X and Y axes. The element is skew 20 degrees along the X-axis and 10 degrees along the Y-axis in the following example.
7. skewX():
This method is used to skew an element along the X-axis at a given angle.
8. skewY():
This method is used to skew an element along the Y-axis at a given angle.
9. matrix():
method combines all of the 2D transform properties into a single property. The matrix transform property takes six matrix parameters (scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()).