# How to rotate in Internet Explorer

## Problem

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.

## Solution

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/

## Discussion

I needed this recently for IE7 and 8, and decided to deal with the nuisance of calculating IE-specific matrix values and offsets by writing a little piece of JavaScript.

The ideas and explanations for the script come from these links:

http://www.boogdesign.com/examples/transforms/matrix-calculator.html

http://extremelysatisfactorytotalitarianism.com/blog/?p=1002

And here's the script (I run it using node, but you can also past it in your browser's console):

```
// --- initialization
var w = 712; // object width
var h = 744; // object height
var deg = 48; // object rotation in degrees
// --- utils
function deg2rad(deg) {
return deg * (2 * Math.PI) / 360;
}
var rad = deg2rad(deg);
// --- from http://www.boogdesign.com/examples/transforms/matrix-calculator.html
var costheta = Math.cos(rad);
var sintheta = Math.sin(rad);
var a = parseFloat(costheta).toFixed(8);
var c = parseFloat(-sintheta).toFixed(8);
var b = parseFloat(sintheta).toFixed(8);
var d = parseFloat(costheta).toFixed(8);
console.log('-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=' + a + ', M12=' + c + ', M21=' + b + ', M22=' + d + ', sizingMethod=\'auto expand\')";');
console.log('filter: progid:DXImageTransform.Microsoft.Matrix(M11=' + a + ', M12=' + c + ', M21=' + b + ', M22=' + d + ', sizingMethod=\'auto expand\');');
// --- from http://extremelysatisfactorytotalitarianism.com/blog/?p=1002
// calculate bounding box width and height
var bb_w = Math.abs(h * Math.sin(rad)) + Math.abs(w * Math.cos(rad));
var bb_h = Math.abs(h * Math.cos(rad)) + Math.abs(w * Math.sin(rad));
// calculate offsets
var offset_left = Math.floor((w / 2) - (bb_w / 2));
var offset_top = Math.floor((h / 2) - (bb_h / 2));
console.log('left: ' + offset_left + 'px;');
console.log('top: ' + offset_top + 'px;');
```

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

you can read it **here**

You can use filters:

```
filter: progid:DXImageTransform.Microsoft.Matrix(...);
```

Matrix has the advantage that you can rotate arbitrary degrees, but you need the matrix values for that. Luckily there is a tool for that:

edit: The matrix-entries can be easily calculated if you want to do some fance stuff with JS:

http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx

Try this,

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

There is also a nice jQuery plugin for this,

**P.S.** The code is limited to 90 degree rotate but not the plugin

This recipe can be found in it's original form on Stack Over Flow.