Rotating Image In Increments On Click

Question

I'm trying to add a numbered dial image to my website that rotates in small increments when it is clicked. The javascript from here is exactly what I'm looking for: CSS3 transition on click using pure CSS

But using that code, it only rotates once, then when clicked again, it moves back to its original position. I've fiddled around with the code to the best of my abilities (which consists of me trying random things until something works) and I've managed to make it rotate 36 degrees on the first and second click, but I'm not sure how to make it continue rotating after that. I would like it to be able to rotate 36 degrees on each click so that after clicking 10 times, it brings it back to its original position.

I'm sure the solution is very simple, but I can't seem to figure it out. Any help would be appreciated.

Here's the javascript:

$( ".crossRotate" ).click(function() {
//alert($( this ).css( "transform" ));
if (  $( this ).css( "transform" ) == 'none' ){
    $(this).css("transform","rotate(36deg)");
} else {
    $(this).css("transform","rotate(72deg)" );
}

});

And the jsfiddle demo: http://jsfiddle.net/rv5PR/472/

Answer 1

You will need to get the current rotation value, then add 36 to that, then use that value for setting the rotation of the element:

$( ".crossRotate" ).click(function() {
    var rotation = getRotationDegrees($(this)) + 36;
    $(this).css("transform","rotate("+rotation+"deg)");
});

Getting the degree is rotation is actually kind of tricky, I'm using this answers solution to do that.

Fiddle Example

---

Edit Acually there is a better way to handle this, we can simply have a variable store the degrees and increment that by 36. The problem with the element suddenly moving around 360 degrees in the other direction is due to the rotation going from some number around 360 to a number close to above 0. It detects that as being smaller and hence goes counter-clockwise. How the element stores it's rotation will by default do %360 on the angle, but simply going over 360 and never resetting the angle to a lower value will make it so it never go counter-clockwise.

var degrees = 0;
$( ".crossRotate" ).click(function() {
    degrees += 36;
    $(this).css("transform","rotate("+degrees+"deg)");
});

Fiddle Example