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

我想要一个可以旋转45度的元素，当站点显示时（工作正常），但是我还希望元素每次旋转45度被盘旋。元素，不应该在任何时候恢复。我如何实现使用CSS动画？CSS动画 - 在每次悬停时进一步旋转45度

我创建了一个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); } }

来源

2017-03-08 christian24

我不能找到一种方式来回答纯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">

来源

2017-03-08 15:56:55 sol

看起来它确实是我所需要的！将尝试并实施它并返回一个更新。谢谢！ :-) – christian24

现在已经实现它，它运作得非常好！再一次 - 谢谢！ – christian24

太棒了，很高兴它工作:) – sol

尝试使用JavaScript的OnMouseEnter在，所以，当鼠标进入它做什么元素，在这种情况下旋转45度。这里是jQuery的方式： https://api.jquery.com/mouseenter/

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

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

来源

2017-03-08 15:14:42 broodjetom

我可能会需要对如何实现我描述多一点指导。看起来可能无法通过CSS来做我所需要的。我认为我主要关心的是每个悬停需要为元素的当前旋转增加45度，这似乎很奇怪。我可能会错过一些东西。 – christian24

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

回答

相关问题