CODEWITHSUNDEEP
cssrotationcss-transforms
user3594015
user3594015

Reputation: 43

Making something rotate x more degrees in CSS

While experimenting with CSS transform functions, I tried to implement a feature that rotates an image 90 degrees each time a button is pressed: 

$("#rotateClockwise").click(function(){

    $("#featuredImage").css("webkit-transform", "rotate(+90deg)");

});

However, I want the button in this example to rotate 90 additional degrees each time the button is clicked -- the above code only rotates the image the first time that I click the button. I know I can do this with some additional JS, but is there a way to implement 90 degrees additional rotation with just CSS transforms?

Upvotes: 1

Views: 991

Answers (1)

Bodzio
Bodzio

Reputation: 2520

Store angle in variable :)

var angle = 0;
$("#rotateClockwise").click(function(){
    angle = (angle + 90) % 360;
    $("#featuredImage").css("webkit-transform", "rotate(" + angle + "deg)");
});

edit: AFAIK it's not possible with only CSS...

Upvotes: 1

Related Questions