如何在css中旋转和旋转？

Question

我试过分别旋转和滑动，它们工作正常。 但是当我将它们组合起来时，它们的组合很尴尬。

http://jsfiddle.net/62RJc/268/

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

因为您使用的是 keyFrame，所以您可以单独使用变换来实现这一点。

看看这个：（另外，在移动时悬停 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-qc-100-100-9.jpg"/>

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

查询：

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

JS Fiddle - 元素没有回到起始位置！