title: CSS - Image shifts away from center after rotation transformation
body: <p>I am recreating the <a href="http://www.atom.io" rel="nofollow noreferrer">Atom.io</a> header where there is 10 spinning circles rotating at different speeds. I got most of it done except when I apply a <code>tranform</code> property to my circles, they shift away from atom image.</p>
  
  <p><a href="https://i.stack.imgur.com/p13U3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p13U3.png" alt="What I have so far"></a>
  I suspect that it's my positioning that is wrong somewhere but after lots of trial and error I cannot find the problem.</p>
  
  <p>Could anyone see a flaw in my code?</p>
  
  <p>I've included a codepen 
  <a href="https://codepen.io/anon/pen/jKXxJp" rel="nofollow noreferrer">here</a>  </p>