CSS 动画 - 每次悬停时进一步旋转 45 度

Question

我希望有一个旋转 45 度的元素，当显示网站时（工作正常），但我也希望元素在每次悬停时再旋转 45 度。该元素不应在任何时候恢复。如何使用 CSS 动画实现这一点？

我创建了一个 fiddle 来制作第一个动画，但我无法让它在每次悬停时多旋转 45 度。

我的 HTML：

<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

我的 CSS：

.image {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 0.6s linear;
-moz-animation:spin 0.6s linear;
animation:spin 0.6s linear;
animation-fill-mode: forwards;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(45deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(45deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(45deg); transform:rotate(45deg); } }

Answer 1

我找不到用纯 CSS 回答您的问题的方法。如果您愿意使用 jQuery，这里是一个潜在的解决方案...

jsfiddle

var image = $('#spin');
var r = 45;

$(function() {
  image.css({
    'transform': 'rotate(' + r + 'deg)'
  });

  jQuery.fn.rotate = function(degrees) {
    $(this).css({
      'transform': 'rotate(' + degrees + 'deg)'
    });
  };

  image.mouseover(function() {
    r += 45;
    $(this).rotate(r);
  });
});

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  transition: all 0.6s ease-in-out;
  transform: rotate(0deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="spin" class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

Answer 2

尝试使用 JavaScript 的 onmouseenter，这样当鼠标进入元素时它会做一些事情，在本例中旋转 45 度。这是jQuery方式： https://api.jquery.com/mouseenter/

//use library: http://jqueryrotate.com/

$('.image').mouseenter(function () {
    $(this).rotate(45);
});