CSS3: Orbiting rings in 3D space (with example) - css

Question

I think I may have hit something above my pay grade with this but.. I'm trying to get 3 rings to circle around in 3D space (similar to electrons around the nucleus of an atom).
Here's a few codes I've tried.
It seems like I can rotate, I can skew, but I can't do both at the same time without a complex matrix equation (and I'm lost on those for now).
Here's an example I made to demonstrate what I'm trying to accomplish in CSS

Answer 1

are you looking for this ? (3d)
http://codepen.io/gcyrillus/pen/aKCuv
animations are delayed and each value of transform are declared.

Answer 2

You need to use wrappers. The HTML:
<!-- language: lang-html -->
<img src="http://s23.postimg.org/3zqc7rp6j/orbit_ring.png" class="rotate" />
<div class="reversed"><img src="http://s23.postimg.org/3zqc7rp6j/orbit_ring.png" class="rotate reversed" /></div>
<div class="skew-1"><img src="http://s23.postimg.org/3zqc7rp6j/orbit_ring.png" class="rotate" /></div>
and the CSS
.skew-1 {
-webkit-transform: scale(1) translateX(10px) translateY(10px) skewX(10deg) skewY(10deg);
}
.skew-2 {
transform: scale(1) translateX(-10px) translateY(-10px) skewX(-10deg) skewY(-10deg);
}
.rotate {
position:absolute;
-moz-animation: 3s rotate infinite linear ;
-moz-transform-origin: 50% 50%;
-webkit-animation: 3s rotate infinite linear ;
-webkit-transform-origin: 50% 50%;
}
#-moz-keyframes rotate {
0 { -moz-transform: rotate(0); }
100% { -moz-transform: rotate(360deg); }
}
#-webkit-keyframes rotate {
0% { -webkit-transform: rotate(0); }
100% { -webkit-transform: rotate(360deg); }
}
.reversed {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scale(-1.2, -1.1);
-webkit-transform-origin: 200px 200px;
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Codepen: http://www.codepen.io/anon/pen/bEnfK
I have seen the new video in the question. Edited some properties to make it look like the video:
new codepen