Html 如何在css中旋转和旋转？

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

---

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

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

img{
边界半径：50%；
-webkit转换：-webkit转换。8s易于输入输出；
-ms转换：-ms转换。8s易进易出；
转换：转换。8s易进易出；
}
按钮：悬停+img{
位置：相对位置；
变换：translateX（200px）旋转（360度）；
}

制作动画！

什么是“笨拙”的意思…你期待什么。有很多闪烁，但@Aramil Rey似乎已经解决了它的问题，无论如何都要阻止它向后旋转？你只是在触发“按钮：悬停”时才向元素添加CSS，你应该用JS永久地添加这些样式，使图像在动画之后保持在原来的位置。我只是想让它旋转并停止显示：无。例如：它会旋转、停止，然后清除。

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