A transformation is an effect which used to change the element shape, size or position. CSS3 supports both 2D and 3D transformation. Following are the different types of transformation functions:
- translate(x,y): This property is used to transform the element along X-axis and Y-axis.
- translateX(n):This property is used to transform the element along X-axis.
- translateY(n): This property is used to transform the element along Y-axis.
- rotate(): This property is used to rotate the element on the basis of an angle.
- scale(x,y): This property is used to change the width and height of an element.
- scaleX(n): This property is used to change the width of an element.
- scaleY(n): This property is used to change the height of an element.
- skewX(): It specifies the skew transforms along with X-axis.
- skewY():It specifies the skew transforms along with Y-axis.
- matrix(): It specifies matrix transforms.
translate()
This function moves an element from its current position to a new position along the X and Y axes. This can be written as translate(tx, ty). If the ‘ty’ value does not specify, its value is assumed to be zero.
rotate()
The rotate() method rotates a particular element clockwise or anti-clockwise by providing a degree value. If we give positive value then it will rotate clockwise and if the negative value it rotates anti-clockwise.
scale()
The scale() function is used to increases or decreases the size of the element according to the parameter given for the width and height. It can be written as a scale(sx, sy). If ‘sy’ does not specify, it is assumed to be equal to sx. In the below example <div> element increases three times its original width and two times its original height.
In the below example
element decreases half of its original width and height.
scaleX()
The scaleX() function is used to increases or decreases the size of the element according to the parameter given for the width.
scaleY()
The scaleY() function is used to increases or decreases the size of the element according to the parameter given for the height.
skew()
The skew() function skews the element along the X-axis and Y-axis by the specified angles. It can be written as skew(ax, ay). If ay isn’t specified, its value is assumed to be zero.
skewX()
The skewX() function skews the element along the X-axis by the specified angle.
skewY()
The skewY() function skews the element along the Y-axis by the specified angle.
matrix()
The CSS matrix() method combines all the 2D transform property into a single property. The matrix transformation property accepts six parameters are as follows:
matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )