CSS3 2D Transforms

CSS3 Transforms

With CSS3 transform, we can move, scale, turn, spin, and stretchelements.

How Does it Work?

A transform is an effect that lets an element change shape, sizeand position.

You can transform your elements using 2D or 3D transformation.

---

Browser Support

PropertyBrowser Supporttransform

Internet Explorer 9 requires the prefix -ms-.

Firefox requires the prefix -moz-.

Chrome and Safari requires the prefix -webkit-.

Opera requires the prefix -o-.

---

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
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}

Try it yourself »

---

The translate() Method

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

Example

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

Try it yourself »

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

---

The rotate() Method

With the rotate() method, the element rotates clockwise at a givendegree. Negative values are allowed and rotates the elementcounter-clockwise.

Example

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

Try it yourself »

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

---

The scale() Method

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

Example

div
{
transform: scale(2,4);
-ms-transform: scale(2,4);
-webkit-transform: scale(2,4);
-o-transform: scale(2,4);
-moz-transform: scale(2,4);
}

Try it yourself »

The value scale(2,4) transforms the width to be twice its originalsize, 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) andthe vertical (Y-axis) lines:

Example

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

Try it yourself »

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

---

The matrix() Method

The matrix() method combines all of the 2D transform methods intoone.

The matrix method take six parameters, containing mathematicfunctions, which allows you to: rotate, scale, move (translate),and skew elements.

Example

How to rotate a div element 30 degrees, usingthe 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);
-moz-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);
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
}

Try it yourself »

---

New Transform Properties

The following table lists all the transform properties:

PropertyDescriptionCSStransformApplies a 2D or 3D transformation to an element3transform-originAllows you to change the position on transformed elements3

2D Transform Methods

FunctionDescriptionmatrix(n,n,n,n,n,n)Defines a 2D transformation, using a matrix of six valuestranslate(x,y)Defines a 2D translation, moving the element along the X- and theY-axistranslateX(n)Defines a 2D translation, moving the element along the X-axistranslateY(n)Defines a 2D translation, moving the element along the Y-axisscale(x,y)Defines a 2D scale transformation, changing the elements width andheightscaleX(n)Defines a 2D scale transformation, changing the element'swidthscaleY(n)Defines a 2D scale transformation, changing the element'sheightrotate(angle)Defines a 2D rotation, the angle is specified in the parameterskew(x-angle,y-angle)Defines a 2D skew transformation along the X- and the Y-axisskewX(angle)Defines a 2D skew transformation along the X-axisskewY(angle)Defines a 2D skew transformation along the Y-axis