CSS3 2D Transforms

Source:

---

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.

Move the mouse over the following elements to see the 2D and 3D transform effects:

2D Transform

3D Transform

---

Browser Support

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

Numbers immediately preceding -webkit-, -ms-, or -moz- indicate the first browser version that supported the prefixed property.

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 -webkit- prefix version.

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

---

2D Transforms

In this chapter you will learn about 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 »

---

translate() Method

The translate() method moves an element from its current position based on the given left (X-axis) and top (Y-axis) parameters.

Example

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

Try it »

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 number of degrees. Negative values are allowed, which rotates the element counterclockwise.

Example

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

Try it »

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

---

scale() Method

The scale() method increases or decreases the size of an element, depending on the parameters for width (X-axis) and height (Y-axis):

Example

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

Try it »

scale (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>]);

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

• skewX(<angle>); indicates skewing only along the X-axis (horizontal direction).
• skewY(<angle>); indicates skewing 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 »

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

---

matrix() Method

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

The matrix method has six parameters, containing rotation, scaling, moving (translation), and skewing functions.

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 »

---

New Transform Properties

The following lists all transform properties:

Property	Description	CSS
transform	Applies a 2D or 3D transformation to an element	3
transform-origin	Allows you to change the position of transformed elements	3

2D Transform 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 translation, moving the element along the X and Y axes.
translateX(_n_)	Defines a 2D translation, moving the element along the X axis.
translateY(_n_)	Defines a 2D translation, moving the element along the Y axis.
scale(_x_,_y_)	Defines a 2D scale transformation, changing the width and height of the element.
scaleX(_n_)	Defines a 2D scale transformation, changing the width of the element.
scaleY(_n_)	Defines a 2D scale transformation, changing the height of the element.
rotate(_angle_)	Defines a 2D rotation, with the angle specified in the parameter.
skew(_x-angle_,_y-angle_)	Defines a 2D skew transformation along the X and Y axes.
skewX(_angle_)	Defines a 2D skew transformation along the X axis.
skewY(_angle_)	Defines a 2D skew transformation along the Y axis.