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.

Problem courtesy of: CKKiller

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/

Solution courtesy of: Mike Christensen

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;');
Discussion courtesy of: Dennis Bunskoek
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

you can read it here

enter image description here

Discussion courtesy of: Royi Namir

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:

http://css3please.com/

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

Discussion courtesy of: Christoph

Try this,

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

There is also a nice jQuery plugin for this,

jQuery rotate

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

Discussion courtesy of: Jashwant

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