javascript - 旋转元素而不返回原始状态

Question

我想在我的 div 上使用鼠标悬停时的图像进行旋转。但是在我想将旋转设置为默认值而不旋转 div 之后。我尝试两种方法。CSS:

.rotate{
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;

    overflow:hidden;

}

.rotate:hover
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

和 jQuery:

var rotated_elems = [".small-blue-1", ".small-blue-2", ".small-blue-3", ".small-blue-4",
    ".small-blue-5", ".big-blue-6", ".animated_blue_1", ".animated_blue_2", ".animated_blue_3"];
$.each(rotated_elems, function (key, element) {
    $(element).hover(function () {
        $(this).animate(
            {rotation: 360},
            { duration: 500,
                step: function (now, fx) {
                    $(this).css({"transform": "rotate(" + now + "deg)"});
                }
            });
    });
});

在第一个 (css) 情况下，元素向后旋转，在 sexond (js) 中，元素旋转到 360。在第二次悬停时没有任何反应。但是我想在第二个 hower 上旋转，而不是向后旋转。有人可以帮忙吗？

Answer 1

<style>
.rotate{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}
</style>
<script>
  element.addEventListener("mouseover", rotate, false);

  function rotate(){
    this.classList.add('rotate');
  }
</script>

遍历您需要的所有类，但基本要点是使用鼠标悬停而不是悬停。