CSS3 2D TRANSFORMS

A transformation is an effect that can change an item's size, shape or position

TRANSLATE

The property translate can move an item from your current location to another location specified by two values (x, y) expressed in pixels

{ transform: rotateY(140deg); /* Safari and Chrome */ -webkit-transform: rotateY(140deg); /* Firefox */ -moz-transform: rotateY(140deg); } transform:translate(50px,50px); /* IE 9 */ -ms-transform:translate(50px,50px); /* Firefox */ -moz-transform:translate(50px,50px); /*Safari,Chrome*/ -webkit-transform:translate(50px,50px); /* Opera */ -o-transform:translate(50px,100px);

ROTATE

Property rotate to rotate an element of a given number of degrees counter-clockwise

transform: rotate(45deg); /* IE 9 */ -ms-transform: rotate(45deg); /* Safari,Chrome */
-webkit-transform: rotate(45deg); /* Opera */ -o-transform: rotate(45deg); /* Firefox */ -moz-transform: rotate(45deg);

SCALE

The property scale to increase or decrease the size of an item on the scale of its parameters (x, y)

transform:scale(2,2); /* IE 9 */ -ms-transform:scale(2,2); /* Firefox */ -moz-transform:scale(2,2); /* Safari,Chrome */ -webkit-transform:scale(2,2); /* Opera */ -o-transform:scale(2,2);

SKEW

The property SKEW to rotate an element at a given angle

transform: skew(40deg,30deg);
/* IE 9 */
-ms-transform: skew(40deg,30deg);
/* Firefox */
-moz-transform: skew(40deg,30deg);
/* Safari,Chrome */
-webkit-transform: skew(40deg,30deg);
/* Opera */
-o-transform: skew(40deg,30deg);