1

考虑以下小提琴：http: //jsfiddle.net/a7EVf/5/

是否可以让 div 在悬停而不是逆时针向后移动时旋转（有效地旋转到 360 度而不是 0）？

如果可能的话，我宁愿不使用 JavaScript（包括 jQuery）——我意识到设置起来很简单

transform: rotate(360deg); /*also the vendor-specific versions*/

在使用 JS 的原始版本上（一旦达到 360 就将其重置为 0 而没有过渡），但是是否可以仅使用 CSS3 来做到这一点？

4

1 回答 1

1

使用 CSS3 动画，我们可以让块在悬停时从 0 度旋转到 180 度，然后在不悬停时从 180 度旋转到 360 度。

#block {
  position: absolute;
  width: 100px;
  height: 50px;
  left: 100px;
  top: 100px;
  background: black;
  color: white;
  animation-name: out;  /* animation to rotate on hover out*/
  animation-duration: 1s;  /* duration for the animation, increase it to slow it down*/
}
#block:hover {
  animation-name: in;  /* animation to rotate on hover */
  animation-duration: 1s;
}
@keyframes in {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
@keyframes out {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div id="block"></div>

笔记：

  1. 这也会导致块在页面加载时旋转。除了使用 JS 并消除对页面加载的影响之外，没有其他解决方案。
  2. 正如您所提到的，当我们以非常快的间隔悬停进出时，会有一些卡顿。这可以通过查看此处和此处的答案来解释。一旦动画不再适用（即选择器不再适用），动画将突然停止并返回到原来未变换的位置。
于 2013-10-08T16:02:25.700 回答