Question

probably a simple question but … I don’t know.

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

I toggle a class active when clicking on a link that rotates #line by 90°. If the class is removed again the #line rotates back to 0°.

I wonder how I can make it rotate within a full circle?

So I click it the first time it rotates to the right to 90°. If I click it again It rotates back (to the left) to 0°. However I want it to rotate to to the right again till it reaches 180°. And so forth. So it should rotate within a full circle.

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

Answer 1

Simple, see it here.

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;
});​

I’ve commented out the CSS & JS that is not required.
Do let me know if that’s not the effect you’re looking for.
Hope it helps. 🙂