javascript - 在网页上旋转/旋转球体

Question

我目前有一个球体形状，但是，我正在尝试想办法在我的网站上将其旋转成一个圆圈，这是我当前的代码:

<style>
  b.ball {
      display: block;
      width: 200px;
      height: 200px;
      margin: 30px auto 0;
      background-color: #3b4ba3;
      border-radius: 50%;
      box-shadow: inset -25px -25px 40px rgba(0,0,0,.5);
      background-image: -webkit-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
      background-image: -moz-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);  
      background-image: -o-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
      background-image: -ms-linear-gradient(-45deg, rgba(255,255,220,.2) 0%, transparent 100%);
    }
<style>
<b class="ball"></b>

上面的代码在页面上放置了一个形状。

如何旋转这个球体使其自转？不是在整个页面周围，而是在它自己的区域，而不是整个页面。我已经用谷歌搜索了它，但我还没有看到任何特别解决这个问题的东西。

Answer 1

您可以使用 css 动画:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

动画转换:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms

只需添加:

.ball {
    animation: spin 3s linear infinite;
}

@keyframes spin {

      from {

          transform:rotate(0deg);

      }

      to {

          transform:rotate(360deg);

      }
}

虽然您需要使用前缀，我已将其包含在演示中:http://jsfiddle.net/99bds/