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/

score 1 · Accepted Answer · edited May 23 '17 at 11:52

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

edited May 23 '17 at 11:52

Community

1
1

answered Sep 23 '15 at 00:29

Spencer Wieczorek

21,229
7
44
54

Exactly what I need. Thank you. – Eagle Jow Sep 23 '15 at 00:39
@EagleJow Great, if this answers your question you can click on the check mark to your left of this answer. – Spencer Wieczorek Sep 23 '15 at 00:42
I'm not sure exactly how to keep it from spinning wildly after it gets back to its original position, but I can definitely work with this. – Eagle Jow Sep 23 '15 at 00:48
@EagleJow I see what you mean, I've noticed another way that's easier to implement and does not have that problem. I've explained why it was happening in my edit. – Spencer Wieczorek Sep 23 '15 at 01:16
So much better! Thank you! – Eagle Jow Sep 23 '15 at 01:19

Rotating Image In Increments On Click

1 Answers1

Linked

Related