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）案例中，elemes向后旋转，在sexond（js）元素中旋转到360.在第二个悬停时没有任何反应。但是我想在第二次击球时旋转，没有后旋。有人可以帮忙吗？

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>

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

Answer 2

您必须使用mouseover代替hover。我认为在CSS中不可能。

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

2 个答案: