CSS Animated Circles - Stop center content from rotating

Question

I\'ve been trying to alter this example of CSS3 animated circles (original by Rishabh) so that the arrow in the centre does not rotate. However, the only way I can get it be

Answer 1

one method would be to break the nesting apart and stack the elements, and then position them accordingly.

I positioned each of the items as needed within the position:absolute; settings adn then broke out the divs from the nesting:

HTML

<div id="container">    
  <div id="main">
    <div id="outer-circle"></div>
    <div id="inner-circle"></div>
    <div id="center-circle"></div>
    <div id="content">
      &darr;
    </div>
  </div>

RELEVANT CSS:

#content {
  position:absolute;
    top: 220px;
    left: 350px;
}

#center-circle {
  position:absolute;
    top:190px;
    left: 320px;
}

#inner-circle {
  position:absolute;
    left: 300px;
    top: 170px;
}

DEMO