小编chr*_*n24的帖子

我希望有一个旋转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); } }