JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
a solution for <a href="http://stackoverflow.com/questions/3789984/jquery-how-do-i-animate-a-div-rotation">http://stackoverflow.com/questions/3789984/jquery-how-do-i-animate-a-div-rotation</a>
<div id="rotation-demo">clickme</div>
CSS
#rotation-demo {
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 200px;
border: 1px dotted black;
}
JavaScript
var el = "#rotation-demo";
//Modernizr.csstransitions = false;
if (Modernizr.csstransitions) {
$(el).css({
"transition": "all 500ms ease-in-out"
});
}
var rot = 0;
$(el).click(function(){
if (rot===0) {
rot = 180;
} else {
rot = 0;
}
if (Modernizr.csstransitions) {
$(el).css({"transform": "rotate("+rot+"deg)"});
} else {
$(el).stop().animate(
{rotation: rot},
{
duration: 500,
step: function(now, fx) {
$(this).css({"transform": "rotate("+now+"deg)"});
}
}
);
}
});