How to turn in Internet Explorer

Question

Is there a way to rotate an element in IE? I am currently using:

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

to rotate elements that work in almost all browsers except IE, and from what I read, IE does not support this function. Is there an alternative? like javascript or another css property that will allow rotation.

Answer 1

You can use:

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

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

Unfortunately, this method will only support rotation in increments of 90 degrees, which, of course, causes irritation when trying to perform certain types of animations or aiming at effects.

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

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

Answer 2

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

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 is the script (I run it using node, but you can also skip it in your browser 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;'); 

Answer 3

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

you can read it here

Answer 4

Try it,

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

There is a nice jQuery plugin for this,

jQuery rotate

PS Code is limited to 90 degree rotation, but not a plugin

Answer 5

You can use filters:

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

The matrix has the advantage that you can rotate arbitrary degrees, but for this you need the values ​​of the matrix. Fortunately, there is a tool for this:

http://css3please.com/

edit: Matrix entries can be easily calculated if you want to do some things with JS:

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