CODEWITHSUNDEEP
cssinternet-explorerrotationcss-transitions
frenchie
frenchie

Reputation: 51937

CSS3 rotation in IE9

I have a jsfiddle that should work in IE9 but that doesn't

The CSS:

#MyDiv{
    width:150px;
    height:150px;       
    margin:100px 100px;
    background-color: red;
    transition:all 2s ease;
    -ms-transition:all 2s ease;}

.Rotate{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform:rotate(360deg);
    -ms-transform: rotate(360deg);}

The javascript:

$(document).ready(function () { AddRotate(); });

function AddRotate() {

    $('#MyDiv').addClass('Rotate');  

    setTimeout(function () {
        RemoveRotate();
    }, 2000);    
}

function RemoveRotate() {

    $('#MyDiv').removeClass('Rotate');

    setTimeout(function () {
       AddRotate();
    }, 2000);  
}

And the HTML: <div id="MyDiv">test</div>

I'm not sure why it's not working. It's about creating a CSS rotation with a transition; where's the bug and how do you fix it to make it work in IE9?

Thanks.

Upvotes: 0

Views: 136

Answers (2)

Spudley
Spudley

Reputation: 168685

Rotation is supported in IE9, but CSS transitions aren't.

You'll need to use a javascript solution.

My suggestion is to use the CSS Sandpaper library, as this allows you to use standard CSS for your transitions, even in IE, which in turn means that you don't have to switch to JS for other browsers just because of IE.

Hope that helps.

Upvotes: 2

Wouter J
Wouter J

Reputation: 41934

Transitions are not support in IE9, they are only supported since IE10. See Can I Use for more information.

Upvotes: 1

Related Questions