如何在css中自旋和旋转？

Question

我试过分别旋转和滑动，效果很好。但是当我把它们组合在一起时，它们的组合很尴尬。

img{

    border-radius:50%;  
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}

Answer 1

因为你使用的是关键帧，你可以单独使用变换来实现。

看看这个：（此外，在移动时悬停 img 不是一件容易的事）

img{
    border-radius:50%;    
    -webkit-transition: -webkit-transform .8s ease-in-out;
    -ms-transition: -ms-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;    
}

button:hover + img {
    position: relative;
    transform: translateX(200px) rotate(360deg);
}

<button>Animate!</button>
<img src="http://lorempixel.com/output/nature-q-c-100-100-9.jpg"/>

要使图像在动画结束后保持原样： 1) 从 CSS 中删除 button:hover + img {} 2) 添加JS

JQuery:

$('button').click(function() {
    $('img').css('transform', 'translate(200px) rotate(360deg)');
});

JS Fiddle - 元素未返回起始位置！

如何在css中自旋和旋转？

How to spin and rotate in css?

html

css

rotation