jQuery - how to “reset” a .css() rotated icon?


Tags: jquery,css,rotation,icons

Problem :

I have an icon, which is rotated on click.

I'd like to "reset" it (without a page refresh), so it would rotate on every click.

$('#icon').click(function(){
    $(this).css('transform','rotate(360deg)');
});

Here is the example: http://jsfiddle.net/tDvD9/1/

Thanks!



Solution :

Here's one simple way:

var r = 0;
$('#icon').click(function(){
    $(this).css('transform','rotate(' + (r += 360) + 'deg)');
});

That way your "transform" property will change on each click (until somebody clicks 100 million times or so).


    CSS Howto..

    css button with arrow… how to move arrow

    How to change a scrolling element behavior on resize? (HTML, CSS, JavaScript) [duplicate]

    How to rearrange several divs on window resize - jQuery or CSS

    how to access image through div

    How to positioning an element over another in CSS

    How to break a table with CSS diagonally or vertically?

    How to put four images 2x2 on other image as background, CSS?

    CSS - How it works

    How to stop css image slideshow at last image?

    Show Content if below specific width

    How to change all CSS file into SCSS

    can't find out how to create a css selector for yahoo stocks page

    How to scale content for displays keeping the ratio [closed]

    How to write css for specific div selection like before after

    How to dynamicaly change css style?

    How to make an Image overlay the site on click?

    How to don't include the google font css in one specific button only?

    How to use media queries in an effective way? [closed]

    How to change placeholder color for number input? (Firefox)

    How do I make LessCSS output css which is then uploaded to webserver

    In css how to joining two div classes without space? [closed]

    Displaying a title and description on a jquery slideshow

    Text overlay over image on hover. How to stop other divs from moving

    Thymeleaf: how to use conditionals to add/remove dynamically a CSS class

    How to automaticly let HTML cut the edges based on the setted height of the image?

    Jquery Show Hide with attribute

    How to include button text and links as part of css

    How to style unordered lists in CSS as comma separated text

    JavaFX-CSS: How to “move” style of parent to a child?

    How to make a div snap to min or max size, without any sizes in-between?