How to rotate in Internet Explorer

Question

Is there any way to rotate an element in IE? I'm currently using:

  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg); 

to rotate elements, which work in pretty much all browsers except IE, and from what I've read IE doesn't support this feature. Is there any alternative? for example JavaScript or another css property that will enable the rotation.

Answer 1

You can use:

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

The value for the rotation can be either 1, 2, 3, or 4. Those numbers represent 90, 180, 270, or 360 degrees of rotation respectively.

Unfortunately, this technique will only support rotations in 90 degree increments, which is definitely annoying when trying to do certain types of animations or hover over effects.

You can also check out the not-so-easy-to-use matrix filter for other rotation effects. Here's a good translator tool to help you:

http://www.useragentman.com/IETransformsTranslator/