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:
We will use examples to implement all of these functions and learn about their concepts.
The translate() method is used to move the element along the X and Y axes from its current position.
The rotate() method rotates an element clockwise or counterclockwise by a specified degree. The degree is indicated in parenthesis.
It is used to increase or decrease the size of an element based on the width and height parameters.
method increases or decreases the width of an element.
method increases or decreases the height of an element.
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.
This method is used to skew an element along the X-axis at a given angle.
This method is used to skew an element along the Y-axis at a given angle.
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()).