CSS3和JS:每90°旋转一圈到一个完整的圆圈？

Question

可能是一个简单的问题,但......我不知道.

<a href="#" id="line">|</a>?

active单击旋转#line90° 的链接时切换类.如果再次移除该类,则#line旋转回0°.

我想知道如何让它在整整一圈内旋转？

所以我第一次向右旋转到90°时点击它.如果我再次单击它它会向后(向左)旋转到0°.但是我希望它再次向右旋转直到达到180°.等等.所以它应该旋转一整圈.

http://jsfiddle.net/5mCTd/2/

Answer 1

很简单,请看这里.

var angle = 90;    

$('#line').click(function() {
    $(this).css ({
        '-webkit-transform': 'rotate(' + angle + 'deg)',
           '-moz-transform': 'rotate(' + angle + 'deg)',
             '-o-transform': 'rotate(' + angle + 'deg)',
            '-ms-transform': 'rotate(' + angle + 'deg)'
    });
    angle+=90;
});?

我已经注释掉了不需要的CSS和JS.如果这不是您正在寻找的效果,请告诉我.希望能帮助到你.:)