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);
});

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

2 个答案: