StackOverflow Query

http://stackoverflow.com/questions/9306971/using-step-function-in-animate-to-transform-rotate-an-element?rq=1

HTML

<ul id="a">
<li class="cAccessories" id="AccButtons"><span>blah blah..</span></li>
<li class="cAccessories" id="AccRibbons"><span>blah blah..</span></li>
<li class="cAccessories" id="AccLaces"><span>blah blah..</span></li>
<li class="cAccessories" id="AccEmbroider"><span>blah blah..</span></li>
</ul>

CSS

#a {
    position: absolute;
    top: 25px;
    left: 25px;
    width: 150px;
    height: 150px;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: blue;
}

JavaScript

$("#a").animate({ opacity: 1 }, {
    		step: function(now,fx)
			{
        		$(this).css({
					'transform':'rotate('+now* 360+'deg)'});
		    },duration:1000,
    complete:function() {
      $("#a").animate({ opacity: 0.5 }, {
    		step: function(now,fx)
			{
        		$(this).css({
					'transform':'rotate('+now* -360+'deg)'});
		    },duration:1000
    });
    }
});