dream hunter dream hunter - 3 months ago 11
Javascript Question

How to rotate an icon in both directions in two clicks?

I want to rotate an icon 90 degree clock wise direction on first click and 90 degree anticlockwise on second click. (remember that the icon can load using either

<i>
tag or
<span>
tag )

Answer

Try this

<a href="#"><div class="fa fa-anchor  rotation_90deg"></div></a>

Add to css classes like below

.rotation_90deg{
   -moz-transition: all 2s linear;
   -webkit-transition: all 2s linear;
   transition: all 2s linear;
}

.rotation_90deg.down{
  -moz-transform:rotate(90deg);
  -webkit-transform:rotate(90deg);
   transform:rotate(90deg);
}

And in your script

$(".rotation_90deg").click(function(){
  $(this).toggleClass("down")  ; 
});

working fiddler http://jsfiddle.net/zakirshakir/3v2egwfs/790/

Comments