I'm currently facing an issue with a div that undergoes rotation as it fades in. While this effect works smoothly on most modern browsers, I've encountered a problem specifically with the code for Internet Explorer.
#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;
}
Although I researched solutions from similar questions like these:
css3 rotation doesn't work in IE9
CSS3 transform: rotate; in IE9
I am open to using jQuery, but my proficiency with it is limited.
Update
I have posted a new query regarding a potential jQuery solution. If you can help me out, I'll gladly bake you a cake. Or a pie.
Rotating a div using jQuery that's supported by IE9