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

因为你正在使用keyFrame，你可以单独使用transform来实现这一点。

看看这个：（此外，在移动时将鼠标悬停在img上并非易事）

＆＃13;

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);
}

＆＃13;

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

＆＃13;

使图像保持在动画结束后的位置： 1）从CSS中删除button:hover + img {} 2）添加JS

<强> JQuery的：

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

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

如何在CSS中旋转和旋转？

1 个答案: