The goal is to achieve slow rotation of an image infinitely. So, the trick i thought of using two CSS classes. First class is a base css. Another defines rotation and transform delay. Here are these two:
.image_basic {
overflow:hidden;
}
.image_rotate {
-webkit-transform:rotate(3600deg);
-moz-transform:rotate(3600deg);
-ms-transform:rotate(3000deg);
-o-transform:rotate(3600deg);
transform:rotate(3600deg);
-webkit-transition-duration: 400s;
-moz-transition-duration: 400s;
-ms-transition-duration: 400s;
-o-transition-duration: 400s;
transition-duration: 400s;
transition-timing-function:ease-out ;
transition-delay:0.2s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-ms-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
It’s a transform for ten rotation over 400 seconds. This roughly gives you slow rotation indefinitely (assuming 400 seconds ~ 6 mins is enough time to stay on a webpage). You also need to switch CSS class for this rotation to take place. Following inline JavaScript/jQuery at the end of the document worked.
<img class="image_basic" src="logo-emblem-small.png"/>
<script type="text/javascript">
$('.image_basic').attr("class","image_rotate");
</script>
Issue: The catch here is the rotation worked seamlessly on all browsers, except IE. Googled everything, No luck! The syntax is correct, other demos for IE CSS rotation are working everywhere. Then what’s wrong here?
Playing around and debugging further, I realized, using IE’s F12 Developer Tools that a change in CSS class (manually changing CSS class in DOM) made it to work. That means the missing CSS change event is causing the issue! Encapsulated above script within document.ready and it worked.
$(function() {
$('.image_basic').attr("class","image_rotate");
});
Conclusion: JavaScript implementation is browser specific. When the document is loading, any CSS change does not fire (CSS3) transform events in IE 10. All you need is to wait for document to load completely. May be this is one of the best practices I got enlightened today.
Happy Coding!
, came to my dreams, woke me up, tied my eyes and took me towards a special room. My expectations were on a high peak, and what I found was beyond my expectations, seriously. It was a room decorated, lit up and a cake to celebrate this special day, exactly at 12AM. Thanks Arti for making it wonderful, I never felt so special ever before on this day. You made my day.
. 
