鼠标移出图标旋转

Question

我分别指this question this JSFiddle。我想在鼠标移出时将图标反向旋转。有什么建议吗？

.fa-spin-hover:hover {
    -webkit-animation: spin 1s 1 linear;
    -moz-animation: spin 1s 1 linear;
    -o-animation: spin 1s 1 linear;
    animation: spin 1s 1 linear;
}

<i class="fa fa-circle-o-notch fa-spin-hover" style="font-size:100px"></i><br />

Answer 1

请试试这个。这是一点点使用javascript和CSS。 你将能够对此有所了解。

{}

$(".circle").mouseover(function(){
  $(".circle").removeClass("reverse").addClass("hover");
}).mouseout(function(){
  $(".circle").removeClass("hover").addClass("reverse");
});

.hover {
  -ms-transform: rotateX(360deg); 
  -webkit-transform: rotate(360deg); 
  transform: rotate(360deg);
  -ms-transition:1s all;
  -webkit-transition:1s all;
  transition:1s all;
}

.reverse {
  -ms-transform: rotate(0deg); 
  -webkit-transform: rotate(0deg); 
  transform: rotate(0deg);
  -ms-transition:1s all;
  -webkit-transition:1s all;
  transition:1s all;
}