CSS3 2D Transforms

CSS3 Transforms

With CSS3 transform, we can move, scale, turn, spin, and stretch elements.
A transformation is an effect that lets an element change shape, size and position.
You can transform your elements using 2D or 3D transformation.

---

Browser Support for 2D Transforms

The numbers in the table specifies the first browser version that fully supports the property.
Numbers followed by -ms-, -webkit-, -moz-, or -o- specifies the first version that worked with a prefix.

Property
transform	10.0 9.0 -ms-	12.0 -webkit-	16.0 3.5 -moz-	3.1 -webkit-	15.0 -webkit- 12.1 10.5 -o-
transform-origin (two-value syntax)	10.0 9.0 -ms-	12.0 -webkit-	16.0 3.5 -moz-	3.1 -webkit-	15.0 -webkit- 12.1 10.5 -o-

---

CSS3 2D Transforms

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

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

You will learn about 3D transforms in the next chapter.

Example

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

Try it yourself »

---

The translate() Method

With the translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position:

Example

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

Try it yourself »

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

---

The rotate() Method

With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the element counter-clockwise.

Example

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

Try it yourself »

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

---

The scale() Method

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

Example

div
{
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Chrome, Safari, Opera */
transform: scale(2,4);
}

Try it yourself »

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

---

The skew() Method

With the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines:

Example

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

Try it yourself »

The value skew(30deg,20deg) turns the element 30 degrees around the X-axis, and 20 degrees around the Y-axis.

---

The matrix() Method

The matrix() method combines all of the 2D transform methods into one.
The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements.

Example

How to rotate a div element 30 degrees, using the matrix method:

div
{
-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); /* Chrome, Safari, Opera */
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}

Try it yourself »

---

CSS3 Transform Properties

The following table lists all the transform properties:

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

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 the Y-axis
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 elements width and height
scaleX(n)	Defines a 2D scale transformation, changing the element's width
scaleY(n)	Defines a 2D scale transformation, changing the element's height
rotate(angle)	Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle)	Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle)	Defines a 2D skew transformation along the X-axis
skewY(angle)	Defines a 2D skew transformation along the Y-axis