title: How do I make this simple CSS animation work? (orbiting circles)
body: <p>I'm trying learn how to create a CSS animation of multiple circles orbiting another circle in the center (I only need it to work in Chrome) </p>
  
  <p><strong>Codepen:</strong> <a href="https://codepen.io/anon/pen/ZxvBve?editors=1100" rel="nofollow noreferrer">https://codepen.io/anon/pen/ZxvBve?editors=1100</a></p>
  
  <p>I'm having troubles making them orbit in different planes and at different angles relative to the viewer. I'm not sure what's the simplest and more optimal way to do it. Should I use <code>rotate()</code> or something else?</p>