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
