CSS Transforms
CSS3 supports transform property. This transform property facilitates you to translate, rotate, scale, and skews elements.
Transformation is an effect that is used to change shape, size and position.
There are two type of transformation i.e. 2D and 3D transformation supported in CSS3.
CSS 2D Transforms
The CSS 2D transforms are used to re-change the structure of the element as translate, rotate, scale and skew etc.
Following is a list of 2D transforms methods:
- translate(x,y): It is used to transform the element along X-axis and Y-axis.
- translateX(n): It is used to transform the element along X-axis.
- translateY(n): It is used to transform the element along Y-axis.
- rotate(): It is used to rotate the element on the basis of an angle.
- scale(x,y): It is used to change the width and height of an element.
- scaleX(n): It is used to change the width of an element.
- scaleY(n): It 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.
Supporting browsers
| Property |  Chrome |  IE |  Firefox |  Opera |  Safari |
|---|---|---|---|---|---|
| transform | 36.04.0 -webkit- | 10.09.0 -ms- | 16.03.5 -moz- | 23.0 15.0 -webkit- 12.1 10.5 -o- | 9.03.2 -webkit- |
| transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.03.5 -moz- | 9.03.2 -webkit- | 23.0 15.0 -webkit- 12.110.5 -o- |
The translate() method
The CSS translate() method is used to move an element from its current position according to the given parameters i.e. X-axis and Y-axis.
Let’s take an example to translate a
See this example:
The rotate() method
The CSS rotate() method is used to rotate an element clockwise or anti-clockwise according to the given degree.
Let’s take an example to rotate a
See this example:
The scale() method
The CSS scale() method is used to increase or decrease the size of an element according to the given width and height.
Let’s take an example to increase the size of an
strong>See this example:
The skewX() method
The CSS skewX() method is used to skew an element along the X axis according to the given angle. Let?s take an example to skew an
See this example:
The skewY() method
The CSS skewY() method is used to skew an element along the Y axis according to the given angle. Let’s take an example to skew an
See this example:
The skew() method
The CSS skew() method is used to skew an element along with X-axis and Y-axis according to the given angle.
Let’s take a <div> element and skew it 30 degree along the X-axis and 20 degree along the Y-axis.
See this example:
The matrix() method
The CSS matrix() method combines all the six 2D transform methods altogether. It allows you to rotate, scale, translate, and skew elements.
Syntax:
The parameters of matrix method: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
See this example: