Working with CSS transformations

CSS transform allow us to transform elements in 2D or in 3D space.  With transform property you can scale, skew, translate and rotate an element. The transformations occurs at the current position in the coordinate system of the element which can be 2D or 3D. However, you can change the position of the transformed element by using transform-origin property. The syntax fortransform-origin is

2D transform-origin: x,y;  |  3D: transform-origin: x,y,z;

You will need to use vendor prefixes while using these properties since it is still in a draft mode(2012). For translating an element 20 pixels on right and 30 pixels at the bottom we will need to write the CSS styles like below.

transform:translate(20px, 30px);
-ms-transform:translate(20px, 30px); // IE
-webkit-transform:translate(20px, 30px); //Chrome, Safari
-moz-transform:translate(20px, 30px);//FF
-o-transform:translate(20px, 30px);//Opera

To skew an element by 30 degree along x-axis we will have to write the following lines-

transform:skew(30deg, 0deg);
-webkit-transform:skew(-30deg, 0deg);
-moz-transform:skew(30deg, 0deg);
-o-transform:skew(30deg, 0deg);

To scale an element twice of its current width we will have to write the following styles

transform:scale(2,1);
-webkit-transform:scale(2,1);
-moz-transform:scale(2,1);
-o-transform:scale(2,1);

You can check the demo of  all the transformation properties here

About the Author

Pravin Varma

Tech Lead at Calsoft

You may also like these