title: Animating an image to make it rotate in a circle
body: <p>I am working on image transforms, rotates, and keyframes, but I am having a bit of an issue trying to get an image to spin in a circle. I have it set to rotate 360deg and two keyframes 0 and 100. I am wanting the image to spin from the center point of the image, so it looks as if the loading circle is loading something.</p>
  
  <p>Right now it seems the image spins from the top-left corner.</p>
  
  <p>Does anyone see what I am doing wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#spinning-circle {
    animation-name: spinning-circle;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    width: 40px;
    height: 40px;
  }
  
  @-webkit-keyframes spinning-circle {
    0% {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="spinning-circle"&gt;
  &lt;img src="http://i.stack.imgur.com/WbNlQ.jpg"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>