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);