HTML / jQuery: button works only once

Question

I have a button that rotates a div called bacon 90 degrees.

If I click the button once, the code works by rotating the div 90 degrees.

If I press the button a second time, nothing will happen.

$("#button").on("click", function () {
    $("#bacon").css({
        '-moz-transform':'rotate(90deg)',
        '-webkit-transform':'rotate(90deg)',
        '-o-transform':'rotate(90deg)',
        '-ms-transform':'rotate(90deg)',
        'transform':'rotate(90deg)'
    });
});

What I would like the code above to do is let me spin endlessly. Therefore, I press it once, it rotates the bacon 90 degrees from the original, twice 180 degrees from the original, three 270 degrees from the original, etc.

Thanks.

* Edit: #button2, , #button, . #button, 90 , #button2 , #button 90 .

, , , , 2 , 4 .

Answer 1

:

var cur_rotation = 0;
$("#button").on("click", function() {
    cur_rotation = (cur_rotation + 90) % 360;
    var rot = 'rotate('+cur_rotation+'deg)';
    $("#bacon").css({
        '-moz-transform':rot,
        '-webkit-transform':rot,
        '-ms-transform':rot,
        'transform':rot
    });
});

, , 90 .

Answer 2

:

var cls = ['rotate-90', 'rotate-180', 'rotate-270', 'rorate-360'],
      i = 0;

$("#button").on("click", function () {
    $("#bacon").removeClass(cls.join(' ')).addClass(cls[i % cls.length]);
    i++;
});