title: Rotate/Spin a Sphere on a web page
body: <p>I currently have a sphere shape but, I'm trying to think of a way on how to rotate it in a circle on my website this is my current code: </p>
  
  <pre><code>&lt;style&gt;
    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%);
      }
  &lt;style&gt;
  &lt;b class="ball"&gt;&lt;/b&gt;
  </code></pre>
  
  <p>The code above puts a shape on the page.</p>
  
  <p>How Would I rotate this sphere so it spins around? Not around the whole page but just in it's own area, not the entire page though. I've Googled it and I have not anything that particularly addresses this question that I've seen yet.</p>