3D Transform around circle on the X axis
<p>I'm trying to create a CSS animation where it looks like a div rotates around an image (or another div) on the X axis.<br>
I was able to create a rough idea of it at: <a href="http://codepen.io/Kupe517/pen/zBKGev" rel="noreferrer">http://codepen.io/Kupe517/pen/zBKGev</a> but the animated div does not have the rotation effect I am looking for. I figure I need to add in some kind of rotateX() to the transform and add perspective but I just can't figure out the right combo. I've attached a rough image of the kind of animation I am trying to achieve. </p>

<p>Here is my current animation code:</p>

<pre><code>@keyframes moveBack { 
 0%{transform:translateY(0); z-index:10;}
 25%{transform:translateY(435px); z-index:10;}
 26%{z-index:0;}
 50%{transform:translateY(0) scale(.8); z-index:0;}
 75%{transform:translateY(-435px); z-index:0;}
 76%{z-index:10;}
 100%{transform:translateY(0); z-index:10;}
}
</code></pre>

<p><a href="https://i.stack.imgur.com/aswcP.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/aswcP.jpg" alt="Circle animation on the x axis"></a></p>