CSS3 Transform

How did you use to skew, scale or rotate an image before CSS3? You did it with an image editor and uploaded each transformed image individually, right? CSS3 can help you cut down a lot on development working hours -- you can perform various transformations on an image with a single line of code. 

Since the transform property hasn't been fully implemented by all major browsers, you will have to use the vendor prefixes. Here is how to do it.

HTML Example:

Rotated image 45 degrees clockwise

Skewed image 30 degrees counter-clockwise

Scaled image 15% of its original size
 

CSS Example:

#rotated { 
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
#skewed {
-moz-transform: skew(-30deg);
-webkit-transform: skew(-30deg);
}
#scaled {
-moz-transform: scale(0.15);
-webkit-transform: scale(0.15);
} 

Result:

Rotated image 45 degrees clockwise

Skewed image 30 degrees counter-clockwise

Scaled image 15% of its original size