CSS Animated Circles - Stop center content from rotating - css

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 still is to remove the animation effect from the three circles (#outer-circle, #inner-circle, #centre-circle), but this gets rid of the cool spinning effect.
The circles are positioned within each other, and are rotating with the CSS below (the link to cssdeck.com is clearer)
-webkit-animation:turning_cw 5s infinite;
-moz-animation:turning_cw 5s infinite;
animation:turning_cw 5s infinite;
Does anyone know a way of getting the arrow in the centre to stay still?

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">
↓
</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