我可以旋转一个div与css和jquery .rotate,但我不知道如何动画它。
解决方法
使用WebkitTransform / -moz-transform:rotate(Xdeg)。这不会在IE中工作,但马特的
zachstronaut解决方案不工作在IE。
如果你想支持IE,你必须调查使用画布像我相信Raphael does。
这里有一个简单的jQuery代码片段,用于旋转jQuery对象中的元素。旋转可以开始和停止:
$(function() { var $elie = $("img"),degree = 0,timer; rotate(); function rotate() { $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'}); timer = setTimeout(function() { ++degree; rotate(); },5); } $("input").toggle(function() { clearTimeout(timer); },function() { rotate(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <input type="button" value=" Toggle Spin " /> <br/><br/><br/><br/> <img src="http://i.imgur.com/ABktns.jpg" />