jquery rotation not working in ie

Question

Hi guys i got some code which is suppose to rotate a div and make it move up. Its working in all browsers apart from IE. Any help would be great.

   function rotate(degree) {
    $elie.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        '-ms-transform': 'rotate(' + degree + 'deg)',
        'transform': 'rotate(' + degree + 'deg)'
    });
    console.log(degree);
    if (degree < 55) {
        timer = setTimeout(function() {
            rotate(++degree)
        }, 10)
};

};

using ie 9. works fine in chrome those so i though it would work in ie — TheEagle, Dec 07 '12 at 23:49
@MikeChristensen - IE6/7/8 is able to do any degree rotation, not just 90 degrees. It has a separate filter for 90 degree increments which is easier to use, but it can do any other angle too. It's a right royal pain to work with, and it has some hideous bugs, but it can do it. — Spudley, Dec 07 '12 at 23:53
@AliBOOM - have you checked that your IE9 is in IE9 mode, and not in IE8-compatibility mode. Your supplied code should work in IE9, but compatibility mode would break it. — Spudley, Dec 07 '12 at 23:57
@Spudley - Ah, yea I think I briefly remember looking into that - but I gave up on it because it did something silly like screw up my PNG alpha channels or something.. — Mike Christensen, Dec 07 '12 at 23:58

score 1 · Answer 1 · answered Dec 08 '12 at 00:06

The code your supplied in the question should work in IE9.

The only reason I can think of for it not working is if your IE9 is actually rendering in IE8-compatibility mode.

This is actually quite a common problem (particularly for developers, as IE defaults to compatibility mode for sites on the local network, which generally includes your development server).

To check, open the dev tools menu (F12), and look at the top right; it should show you the browser mode. If it says anything other than "IE9 Standards", then you need to correct it. This annoying default can be switched off as follows:

Select the "Tools" menu,
Select Compatibility View Settings.
Un-tick the options that activate compatibility mode.

You might also want to add a meta tag to your page to force IE to use standards mode for other users:

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

With these measures in place, your page should render in IE9 standards mode, and you should then be able to use the standard CSS rotation.

Hope that helps.

Tried this , still nothing :) – TheEagle Dec 08 '12 at 00:15 — TheEagle, Dec 08 '12 at 00:15
can you confirm the rendering mode that IE9 is using? – Spudley Dec 08 '12 at 15:07 — Spudley, Dec 08 '12 at 15:07

score 0 · Answer 2 · edited May 23 '17 at 12:12

Could you tell what IE browser version you are using ? your code should work fine for IE9, Try to add this in your css for the other versions of IE :

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

so with your code it should be like below:

   function rotate(degree) {
    $elie.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        '-ms-transform': 'rotate(' + degree + 'deg)',
        'transform': 'rotate(' + degree + 'deg)',
        'filter': 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)', /* IE7  Note this is the code for 45 degree */
        '-ms-filter': "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8  Note this is the code for 45 degree  */
    });
    console.log(degree);
    if (degree < 55) {
        timer = setTimeout(function() {
            rotate(++degree)
        }, 10)
};

references :

CSS3 transform: rotate; in IE9

CSS rotate property in IE

this would go in the CSS code; it's IE-specific code for IE7/8/9. But you only need it if you want to support old IE versions; IE9 should do standard CSS rotations, as per the reference link he provided. you don't need the filter if you're just supporting IE9. — Spudley, Dec 07 '12 at 23:56
it won't hurt if you add it, if you are using IE9 and the rotation is not working, then make sure compatibility mode is not set to 7 or 8. — Mehdi Karamosly, Dec 08 '12 at 00:15
@AliBOOM the code I gave , which is compatible with IE7 & IE8 is for 45 degree, check it and if it worked you should research more to know how to use the variables to change the degree. — Mehdi Karamosly, Dec 08 '12 at 00:24

score 0 · Answer 3 · answered Dec 07 '12 at 23:32

try

if($.browser.msie){
    $elie.css({ msTransform: 'rotate(' + degree + 'deg)' });
}else{
    $elie.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        '-ms-transform': 'rotate(' + degree + 'deg)'
    });
}

jquery rotation not working in ie

3 Answers3