fiddle

Question

我的网站上有一张图片。当我将鼠标悬停在它上面时，我希望它能够进行360度旋转动画。

我目前正在使用CSS： -

.img-responsive:hover {
transition-duration: 2s;
transform:rotate(360deg);
}

但是，当用户在图像边缘盘旋时，图像会旋转，不再在边缘盘旋，导致图像“痉挛”。

如何实现正确的外观和稳定的旋转？ JavaScript也可以。

Answer 1

您可以通过向转换添加小延迟来解决此问题

<强> Working Demo

.img-responsive:hover {
  transition-duration: 2s;
  transform:rotate(360deg);
  transition-delay: 0.5s;
}

更新

如果您可以使用animation，则可以执行此操作

<强> Updated Demo

.img-responsive {
  animation: rotateme;
}

.img-responsive:hover {
  animation: rotateme 5s; 
}

Answer 2

您可以在悬停时使图片更大，这样用户不小心取消隐藏

如果没有填充或边距，请设置

.img-responsive:hover {
    transition-duration: 2s;
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    transform:rotate(360deg);
    padding: 50px;
    margin: -50px;
}

将填充增加到50px可确保鼠标仍在其上。更改相同数量的边距，但相反的意义使其保持在同一位置。

在悬停时旋转横幅会导致其痉挛

2 个答案:

更新

fiddle