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

Try It! 

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

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

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

Try It! 

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

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

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

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

Try It! 

New conversion properties

All conversion properties are listed below:

2D transformation methods