Rotating Image In Increments On Click

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

Solution 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