Question

我希望在我的网页上有一个圆形div，并且能够像使用鼠标一样旋转它。我试图使用jQuery拖动，但我无法想出一种旋转div的方法。

有没有办法用鼠标旋转div元素？如果有可能增加动力，还有什么好处呢？

Answer 1

你可以通过利用CSS3 Transitions和Transforms的魔力，在没有任何Javascript或jQuery的情况下实现这一点。

首先，您需要通过设置div属性来将transform设置为零度旋转：

div {
    transform:rotate(0deg);
}

然后，您只需要基于悬停的过渡（又称旋转效果）。为此，您可以使用:hover伪元素，如下所示：

div:hover {
    transition: transform 1s ease;
    transform: rotate(360deg);
}

如果您希望元素具有转换回原位的过渡，只需将过渡属性添加到div的CSS中，如下所示：

div {
    transform:rotate(0deg);
    transition: transform 1s ease;
}

当然，1s的时间完全取决于你;随意使用您想要的任何值，即使ms（毫秒）。

以下是有关CSS3过渡和转换的更多信息：

至于兼容性，大约76％的普通浏览器市场支持它：http://caniuse.com/#search=transitions

请注意，某些浏览器不支持transition属性;有些要求您使用供应商前缀来获得支持。例如，Chrome和Safari的前缀为-webkit-，因此您可以-webkit-transition: transform 1s ease;使其在这些浏览器中正常运行。我在下面列出了供应商前缀：