javascript - 如何通过两次单击在两个方向上旋转图标？

Question

我想在第一次点击时将图标顺时针旋转 90 度，在第二次点击时逆时针旋转 90 度。 (请记住，图标可以使用 <i> 标签或 <span> 标签加载)

Answer 1

试试这个

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

像下面这样添加到 css 类中

.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);
}

在你的脚本中

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

工作 fiddler http://jsfiddle.net/zakirshakir/3v2egwfs/790/