CSS3 2D Transform
CSS3 transitions
CSS3 transformations can move, scale, rotate, stretch, or stretch elements.
How does it work?
The effect of a transition is to make an element change shape, size and position.
You can transform your elements using 2D or 3D transformations.
Browser support
The numbers in the table represent the first browser version number that supports the property.
The number immediately preceding -webkit-, -ms- or -moz- is the version number of the first browser that supports the prefixed attribute.
Property | ![]() | ![]() | ![]() | ![]() | ![]() |
---|---|---|---|---|---|
transform | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
transform-origin (two-value syntax) | 36.0 4.0 -webkit- | 10.0 9.0 -ms- | 16.0 3.5 -moz- | 3.2 -webkit- | 23.0 15.0 -webkit- 12.1 10.5 -o- |
Internet Explorer 10, Firefox, and Opera support the transform property.
Chrome and Safari require the prefix -webkit- version.
Note: Internet Explorer 9 requires the prefix -ms- version.
2D transformation
In this chapter you will learn about 2D transformation methods:
translate()
rotate()
scale()
skew()
matrix()
In the next chapter you will learn about 3D transformations.
Example
div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ }
translate() method
The translate() method moves from the current element position according to the parameters given by the left (X-axis) and top (Y-axis) positions.
Example
div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ }
The translate value (50px, 100px) is to move the element 50 pixels from the left and 100 pixels from the top.
rotate() method
The rotate() method, rotates the element clockwise by a given degree. Negative values are allowed, so that the element is rotated counterclockwise.
Example
div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ }
rotate value (30deg) The element rotates 30 degrees clockwise.
scale() method
The scale() method, the size of the element to increase or decrease, depends on the parameters of width (X axis) and height (Y axis):
Example
-ms-transform:scale(2,3); /* IE 9 */ -webkit-transform: scale(2,3); /* Safari */ transform: scale(2,3); /* Standard syntax */
scale(2,3) transforms the width to 2 times its original size, and the height to 3 times its original size.
skew() method
Grammar
transform:skew(<angle> [,<angle>]);
Contains two parameter values, which represent the angle of the X-axis and Y-axis inclination respectively. If the second parameter is empty, the default is 0, and the parameter is negative to indicate the inclination in the opposite direction.
skewX(<angle>); Indicates that it is skewed only on the X axis (horizontal direction).
skewY(<angle>); Indicates that it is skewed only on the Y axis (vertical direction).
Example
div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ }
skew(30deg,20deg) The element is skewed by 20 degrees and 30 degrees on the X and Y axes.
matrix() method
The matrix() method and the 2D transform method are combined into one.
The matrix method has six parameters, including rotation, scaling, translation (translation) and tilt functions.
Example
Use the matrix() method to rotate the div element by 30°
div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ }
New conversion properties
All conversion properties are listed below:
Property | Description | CSS |
---|---|---|
transform | Elements suitable for 2D or 3D transformations | 3 |
transform-origin | Allows you to change the conversion element position | 3 |
2D transformation methods
Function | Description |
---|---|
matrix(n,n,n,n,n,n) | Defines a 2D transformation, using a matrix of six values. |
translate(x,y) | Defines a 2D transformation that moves elements along the X and Y axes. |
translateX(n) | Defines a 2D transformation that moves the element along the X axis. |
translateY(n) | Defines a 2D transformation that moves the element along the Y axis. |
scales ( x , y ) | Defines a 2D scaling transformation that changes the width and height of an element. |
scaleX(n) | Defines a 2D scale transformation that changes the width of an element. |
scaleY(n) | Defines a 2D scale transformation that changes the height of an element. |
rotate(angle) | Define the 2D rotation, specifying the angle in the parameters. |
skew(x-angle,y-angle) | Defines the 2D tilt transformation, along the X and Y axes. |
skewX(angle) | Defines the 2D tilt transformation, along the X axis. |
skewY(angle) | Defines the 2D tilt transformation, along the Y axis. |