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

Question

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

我创建了一个小提琴这使得第一动画,但我只是不能让它每次悬停时间旋转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">