Crossbrowser image rotation

03 May 2013

Image rotation is a key requirement that any front-end guy encounters while doing a web project. For example: Lets say we have a slideshow which can be configured to work both horizontally as well as vertically. For navigation we have an image of a arrow pointing to the right.

We can use the same image to produce arrows which points to the left, up and down. We just need to rotate this image to certain angles.

CSS3 provides a transform property which allows developers to rotate any dom element to any specified degree. For example, we can apply 90 deg rotation to pur image via this css rule:

img{
    transform: rotate(90deg)    
}

All the browsers do not support this yet, so we use the vendor prefixes applied to the property to get the desired roration. We use the below code to get the same effect across different browsers.

img{
    -webkit-transform:rotate(90deg); // chrome
    -moz-transform:rotate(90deg); // Firefox
    -o-transform:rotate(90deg); //Opera 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); // IE 5.5+
    transform:rotate(90deg);
}

Internet explorer has a special filter property which can be used to get the desired result.

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

We can set the rotation property of the BasicImage filter to rotate the image by 0, 90, 180, 270 degrees by supplying values of 0, 1, 2, 3.

The basic image filter has lots of other properties like grey scale, mirroring etc.

Have fun with rotation :)

More Information

CSS Transform