CSS3 2D Transforms Tutorial

You can see all the Transform Properties Here.

Currently none of the browsers fully support all of the transform functions. However, all the latest versions of the browsers support the 2D transform functions using browser specific prefixes.

 
Translate

There are three 2D translate functions- translateX(), translateY() and translate(). Together these functions allow you to shift the position of an element on a two dimensional plane. Let us start with the translateX() function. This function moves the element along the x-axis by a given unit of length.  As with any other value in CSS, changing the sign from positive to negative changes the direction in which the element is shifted along the x-axis. Here is an example.

#box
{
transform:translateX(50px);
-ms-transform:translateX(50px); /* IE */
-moz-transform:translateX(50px); /* Firefox */
-webkit-transform:translateX(50px); /* Safari and Chrome */
-o-transform:translateX(50px); /* Opera */
}

The image below shows how this will display. The box with the dotted border represents the original position of the element. The box with the red border is the element after it is transformed.

The translateY() function works much like the translateX() function. It takes a length unit as its value and moves the element by that amount along the y-axis. Changing the sign once again changes the direction in which it is moved along the y-axis. Here is an example.

#box
{
transform:translateY(50px);
-ms-transform:translateY(50px); /* IE */
-moz-transform:translateY(50px); /* Firefox */
-webkit-transform:translateY(50px); /* Safari and Chrome */
-o-transform:translateY(50px); /* Opera */
}

Here is what it looks likes in the browser.

The translate() function combines the x and y functions. It takes two length values for x and y, and moves the element on an x-y plane. Here is an example.

#box3
{
transform:translate(50px,50px);
-ms-transform:translate(50px,50px); /* IE */
-moz-transform:translate(50px,50px); /* Firefox */
-webkit-transform:translate(50px,50px); /* Safari & Chrome */
-o-transform:translate(50px,50px); /* Opera */
}

Here is what it looks like in the browser.

Scale

The next set of transform functions we will look will be the scale functions. Once again there are three 2D scale functions – scaleX(), scaleY() and scale(). These functions take a number as its value and increase or decrease the size of the element by that factor. The scaleX() function will change the width of an element by a give factor. Let us look at an example.

#box1
{
transform:scaleX(1.5);
-ms-transform:scaleX(1.5); /* IE */
-moz-transform:scaleX(1.5); /* Firefox */
-webkit-transform:scaleX(1.5); /* Safari and Chrome */
-o-transform:scaleX(1.5); /* Opera */
}

Here is what it looks like in the browser

The scaleY() function will change the height of an element by a factor. Let us look at an example.

#box2
{
transform:scaleY(.75);
-ms-transform:scaleY(.75); /* IE */
-moz-transform:scaleY(.75); /* Firefox */
-webkit-transform:scaleY(.75); /* Safari and Chrome */
-o-transform:scaleY(.75); /* Opera */
}

Here is what it looks like in the browser.

The scale() function takes two values, one for x and one for y. You can use this function to change the width and height of an element by the specified values. Here is an example.

#box3
{
transform:scale(1.5,0.75);
-ms-transform:scale(1.5,0.75); /* IE */
-moz-transform:scale(1.5,0.75); /* Firefox */
-webkit-transform:scale(1.5,0.75); /* Safari and Chrome */
-o-transform:scale(1.5,0.75); /* Opera */
}

Here is what it looks like in the browser.

Rotate

As you might have guessed, the 2D rotate() function rotates an element clockwise or anti-clockwise from its original position. The value for this function is an angle. Let us look at an example.

#box1
{
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE */
-moz-transform:rotate(30deg); /* Firefox */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
-o-transform:rotate(30deg);/* Opera */
}

#box2
{
transform:rotate(-30deg);
-ms-transform:rotate(-30deg); /* IE */
-moz-transform:rotate(-30deg); /* Firefox */
-webkit-transform:rotate(-30deg); /* Safari and Chrome */
-o-transform:rotate(-30deg);/* Opera */
}

Here is what it looks like in the browser.

Skew

The next set of 2D transform functions we will look will be the skew functions. These functions distort the shape of an element by an angle value. There are three skew functions – skewX(), skewY(), and skew(). The skewX() function skews the element by a given angle along the x-axis. Here is an example.

#box1
{
transform:skewX(20deg);
-ms-transform:skewX(20deg); /* IE */
-moz-transform:skewX(20deg); /* Firefox */
-webkit-transform:skewX(20deg); /* Safari and Chrome */
-o-transform:skewX(20deg);/* Opera */
}

#box2
{
transform:skewX(-20deg);
-ms-transform:skewX(-20deg); /* IE */
-moz-transform:skewX(-20deg); /* Firefox */
-webkit-transform:skewX(-20deg); /* Safari and Chrome */
-o-transform:skewX(-20deg);/* Opera */
}

Here is what it looks like in the browser

The skewY() function skews the element by a given angle along the y-axis. Here is an example.

#box1
{
transform:skewY(20deg);
-ms-transform:skewY(20deg); /* IE */
-moz-transform:skewY(20deg); /* Firefox */
-webkit-transform:skewY(20deg); /* Safari and Chrome */
-o-transform:skewY(20deg);/* Opera */
}