1

I have a div that I'm rotating as it fades in. It works in every modern browser, but the code for IE doesn't seem to be working.

#box
{
    width: 400px;
    height: 400px;
    display: inline-block;
    position: absolute;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transition: all 0.8s 1s ease-in-out;
    -webkit-transition: all 0.8s 1s ease-in-out;
    -moz-transition: all 0.8s 1s ease-in-out;
    -o-transition: all 0.8s 1s ease-in-out;
    opacity:0;
}

#box.animate
{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    opacity:100;
}

I've looked at the following two similar questions, but their solutions didn't solve my problem.

css3 rotation doesn't work in IE9

CSS3 transform: rotate; in IE9

I'd be willing to use jQuery, but I don't know it well enough to code it myself.

Update

Below is a link to a new question I asked about how to solve using jQuery. If you can help I'll make you a cake. Or a pie.

Rotating a div using jQuery that's supported by IE9

Community
  • 1
  • 1
Timothy Adams
  • 191
  • 1
  • 1
  • 16
  • Useful [read](http://stackoverflow.com/questions/15191058/css-rotation-cross-browser-with-jquery-animate) - works on IE9. I recommend using [JQuery transit](http://ricostacruz.com/jquery.transit/), however, it also doesn't support IE9. – Vucko Jul 26 '13 at 19:30
  • This article will help you with your transform use '-sand-transform' [link](http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie) you can find there few examples – Lukas Greso Jul 26 '13 at 19:48

3 Answers3

4

IE9 does not support transitions, therefore, it will not animate using the transition style.

http://caniuse.com/#search=transition

You will have to use javascript or a javascript library (jQuery, etc) in order to achieve this in IE 9. So to answer your initial question, the answer is no, it should not work in IE 9. You might want to rephrase and post a new question on how to do image rotation in jquery however.

Robert McKee
  • 21,305
  • 1
  • 43
  • 57
  • To be honest, I didn't think it did, but so many other people kept saying it did work. Any idea on how to solve the issue using jQuery? – Timothy Adams Jul 26 '13 at 19:23
0

Unfortunately CSS property isnt supported by IE9 and earlier

transition:

to create your dealed effect you should use jQuery, Mootools or other similar javascript library. I know that is not solution, but just hint.

Lukas Greso
  • 472
  • 4
  • 6
-1

What's the content type on the page? If you're not defining a content type, I believe IE9 goes into a "quirks mode". You should set your content type to the following for the best performance in IE:

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

CamHenlin
  • 194
  • 8