Html CSS动画-每次悬停时再旋转45度

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

我已经创建了一个可以制作第一个动画的动画，但是我不能让它在每次悬停时再旋转45度

我的HTML：

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

---

尝试使用JavaScript的onMouseCenter，这样当鼠标进入元素时，它会做一些事情，在本例中旋转45度。以下是jQuery的方法：

---

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

var image=$（'#spin'）；
var r=45；
$（函数（）{
image.css({
“变换”：“旋转（“+r+”度）”
});
jQuery.fn.rotate=函数（度）{
$（this.css）({
“变换”：“旋转（“+度+”度）”
});
};
image.mouseover（函数（）{
r+=45；
$（此）。旋转（r）；
});
});
.image{
位置：绝对位置；
最高：50%；
左：50%；
宽度：120px；
高度：120px；
裕度：-60px0-60px；
过渡：所有0.6秒缓进缓出；
变换：旋转（0度）；
}

关于如何实现我所描述的目标，我可能需要更多的指导。似乎仅仅通过CSS可能无法完成我需要做的事情。我想我主要关心的是，每次悬停都需要在元素当前旋转的基础上增加45度，这似乎非常困难。我可能错过了什么。看起来它正是我需要的！将尝试并实现它，并返回更新。谢谢！：-）现在，我们已经实现了它，它工作得很好！再次感谢你！
.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); } }

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

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