CSS3 2D Transforms

CSS3 Transforms

CSS3 transforms allow elements to be moved, scaled, rotated, stretched, or skewed.

How Does It Work?

The effect of a transform is to change the shape, size, and position of an element.

You can use 2D or 3D transforms to transform your elements.

Hover over the elements below to see the 2D and 3D transform effects:

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

The numbers preceding -webkit-, -ms-, or -moz- indicate the first browser version that supports the prefixed property.

Internet Explorer 10, Firefox, and Opera support the transform property.

Chrome and Safari require the -webkit- prefix.

Note: Internet Explorer 9 requires the -ms- prefix.

2D Transforms

In this chapter, you will learn about the 2D transform methods:

• translate()

• rotate()

• scale()

• skew()

• matrix()

In the next chapter, you will learn about 3D transforms.

Example

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

translate() Method

The translate() method moves an element from its current position based on the given parameters for 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) moves the element 50 pixels from the left and 100 pixels from the top.

rotate() Method

The rotate() method rotates an element clockwise by a given degree. Negative values are allowed, causing the element to rotate counterclockwise.

Example

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

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

scale() Method

The scale() method increases or decreases the size of an element based on the parameters for 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 */

The scale value (2,3) transforms the width to twice its original size and the height to three times its original size.

skew() Method

Syntax

transform: skew(<angle> [,<angle>]);

It contains two parameter values, which represent the angles of inclination on the X-axis and Y-axis, respectively. If the second parameter is omitted, it defaults to 0. Negative values indicate an opposite direction of inclination.

• skewX(<angle>); indicates inclination only on the X-axis (horizontal direction).

• skewY(<angle>); indicates inclination 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) element is tilted 30 degrees on the X axis and 20 degrees on the Y axis.

matrix() Method

The matrix() method combines 2D transformation methods into one.

The matrix method has six parameters, including functions for rotation, scaling, translation, and skewing.

Example

Using the matrix() method to rotate a 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 Transformation Properties

The following lists all transformation properties:

2D Transformation Methods