Circulate, but in CSS3 - css

Question

I'm trying to use CSS3 to create a similar circulating example like the flying unicorn in the below link:
http://css-tricks.com/examples/Circulate/
The unicorn example utilizes jQuery, which is fun and all but I was hoping to pull it off with either animation, transform or translate or something else. So far all I can do is have my div swing around like a propeller. I've searched all around for an answer and tried a number of things on my own but nothing has worked.
Help!

Answer 1

Here is my solution
Working Codepen Demo
HTML
<div class="wrapper">
<div class="circle"></div>
</div>
CSS3
.circle {
background:grey;
border-radius:100%;
width:50px;
height:50px;
position:absolute;
top:50%;
left:0;
animation: rotate 10s linear infinite;
transform: rotate(45deg) translateX(150px) rotate(-45deg);
}
#keyframes rotate {
from { transform: rotate(0deg) translateX(150px) rotate(0deg); }
to { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
May be you can find better solution, This is my way of doing it. Hope it help you to understand better.

Answer 2

You can achieve this using 3d transforms.
A solution for Chrome:
.container {
-webkit-perspective: 600px;
-webkit-perspective-origin-x: 300px;
position: absolute;
left: 300px;
top: 85px;
width: 300px;
height: 100px;
background-color: lightblue;
-webkit-transform: translateZ(10px);
-webkit-transform-style: preserve-3d;
}
.test {
position: absolute;
width: 100px;
height: 100px;
left: 100px;
background-color: red;
border-radius: 50%;
-webkit-animation: orbit 4s infinite linear;
-webkit-transform: rotate3d(0, 1, 0, -89deg) translateX(300px);
z-index: -1;
}
#-webkit-keyframes orbit {
0% {-webkit-transform: rotate3d(0, 1, 0, 0deg) translateX(200px) rotate3d(0, 1, 0, 0deg);}
100% {-webkit-transform: rotate3d(0, 1, 0, 360deg) translateX(200px) rotate3d(0, 1, 0, -360deg);}
}
demo
You will have problems porting the full demo to IE (the part about the circle hiding behind the rectangle)