Javascript 在网页上旋转/旋转球体

我目前有一个球体形状，但我正在尝试在我的网站上思考如何将其旋转成一个圆圈这是我当前的代码：

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

b、 球{
显示：块；
宽度：200px；
高度：200px；
利润率：30px自动0；
背景色：#3b4ba3；
边界半径：50%；
盒影：插入-25px-25px-40px rgba（0,0,0,5）；
背景图像：-webkit线性渐变（-45度，rgba（255255220，.2）0%，透明100%）；
背景图像：-moz线性梯度（-45度，rgba（255255220，.2）0%，透明100%）；
背景图像：-o-线性梯度（-45度，rgba（255255220，.2）0%，透明100%）；
背景图像：-ms线性梯度（-45度，rgba（255255220，.2）0%，透明100%）；
}

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

---

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

你可以使用css动画：

要设置变换的动画，请执行以下操作：

只需添加：

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

@keyframes spin {

      from {

          transform:rotate(0deg);

      }

      to {

          transform:rotate(360deg);

      }
}

---

不过，您需要使用前缀，我已经在演示中包括了前缀：

在谷歌上搜索jQuery rotate/flip/spin插件或CSS3转换。他们会成功的。