YouTip

CSS3 Transforms

CSS3 transforms allow you to translate, rotate, scale, and skew elements.

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 2D and 3D transform effects:

2D Transform 3D Transform

Browser Support

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

Numbers followed by -webkit-, -ms-, or -moz- specify the first version that worked with a prefix.

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 Transforms

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

• translate()
• rotate()
• scale()
• skew()
• matrix()

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

Example

div{transform:rotate(30 deg); -ms-transform:rotate(30 deg);  -webkit-transform:rotate(30 deg); }

Try it Yourself »

The translate() Method

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis).

Example

div{transform:translate(50 px,100 px); -ms-transform:translate(50 px,100 px);  -webkit-transform:translate(50 px,100 px); }

Try it Yourself »

The translate value (50px, 100px) moves the element 50 pixels to the right, and 100 pixels down from its current position.

The rotate() Method

The rotate() method rotates an element clockwise or counter-clockwise according to a given degree.

Example

div{transform:rotate(30 deg); -ms-transform:rotate(30 deg);  -webkit-transform:rotate(30 deg); }

Try it Yourself »

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

The scale() Method

The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).

Example

-ms-transform:scale(2,3);  -webkit-transform: scale(2,3);  transform: scale(2,3);

Try it Yourself »

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

The skew() Method

Syntax

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

Contains two parameter values, indicating the angle of skew along the X-axis and Y-axis. If the second parameter is empty, it defaults to 0. A negative parameter indicates skew in the opposite direction.

• skewX(<angle>); indicates skew only along the X-axis (horizontal direction).
• skewY(<angle>); indicates skew only along the Y-axis (vertical direction).

Example

div{transform:skew(30 deg,20 deg); -ms-transform:skew(30 deg,20 deg);  -webkit-transform:skew(30 deg,20 deg); }

Try it Yourself »

skew(30deg,20deg) skews the element 30 degrees along the X axis, and 20 degrees along the Y axis.

The matrix() Method

The matrix() method combines all the 2D transform methods into one.

The matrix method takes six parameters, containing functions for rotating, scaling, moving (translating), and skewing.

Example

Rotate the div element 30° using the matrix() method:

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);  -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); }

Try it Yourself »

New Transform Properties

The following lists all the transform properties:

2D Transform Methods