CSS3 2D Transform


CSS3 transitions

CSS3 transformations can move, scale, rotate, stretch, or stretch elements.

CSS3 Transforms

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.

Property1643985194172053596.png1643985208463030831.png1643985222261087814.png1643985235170032573.png1643985254818020619.png
transform36.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.

OperaSafariChromeFirefoxInternet Explorer

Example

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

Try It! 


translate() method

Translate

The translate() method moves from the current element position according to the parameters given by the left (X-axis) and top (Y-axis) positions.

OperaSafariChromeFirefoxInternet Explorer

Example

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

Try It! 

The translate value (50px, 100px) is to move the element 50 pixels from the left and 100 pixels from the top.


rotate() method

Rotate

The rotate() method, rotates the element clockwise by a given degree. Negative values are allowed, so that the element is rotated counterclockwise.

OperaSafariChromeFirefoxInternet Explorer

Example

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

Try It! 

rotate value (30deg) The element rotates 30 degrees clockwise.


scale() method

Scale

The scale() method, the size of the element to increase or decrease, depends on the parameters of width (X axis) and height (Y axis):

OperaSafariChromeFirefoxInternet Explorer

Example

-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* Standard syntax */

Try It! 

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).

OperaSafariChromeFirefoxInternet Explorer

Example

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

Try It! 

skew(30deg,20deg) The element is skewed by 20 degrees and 30 degrees on the X and Y axes.


matrix() method

Rotate

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.

OperaSafariChromeFirefoxInternet Explorer

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 */
}

Try It! 


New conversion properties

All conversion properties are listed below:

PropertyDescriptionCSS
transformElements suitable for 2D or 3D transformations3
transform-originAllows you to change the conversion element position3

2D transformation methods

FunctionDescription
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.