index.html

<div class="space" style="height: 300px">
  <div class="item moon"><img src="http://nicovanzyl.com/external/files/img/moon.png"></div>
  <div class="item ship"><img src="http://nicovanzyl.com/external/files/img/small-ship.png"></div>
  <div class="item earth"></div>
    <!--(optional)<div class="item shadow"></div>-->
</div>

style.css

body{
  background-color:gray;
  background-image:
  radial-gradient(white, rgba(255,255,255,.2)   2px, transparent 40px),
  radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
  radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
  radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
  background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; 
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
}

.space{
  position: relative;
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.item{
    position: absolute;
 }
.moon{
    width: 300px;
    height: 300px;
    border-radius: 300px;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    z-index:200;
    -webkit-animation: linear space-rotate 38s infinite;
       -moz-animation: linear space-rotate 38s infinite;
         -o-animation: linear space-rotate 38s infinite;
            animation: linear space-rotate 38s infinite;
 }
.moon img{
      position: absolute;
      right: 0px;
      top:50%;
      -webkit-animation: linear space-rotate 25s infinite;
         -moz-animation: linear space-rotate 25s infinite;
           -o-animation: linear space-rotate 25s infinite;
              animation: linear space-rotate 25s infinite;
}
.ship{
    width: 200px;
    height: 200px;
    border-radius: 300px;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top: 15%;
    z-index:200;
    -webkit-animation: linear space-rotate-anti 15s infinite;
       -moz-animation: linear space-rotate-anti 15s infinite;
         -o-animation: linear space-rotate-anti 15s infinite;
            animation: linear space-rotate-anti 15s infinite;
}
.ship img{
      position: absolute;
      left: 0px;
      top:50%;
}
.earth{
    width: 100px;
    height: 100px;
    background: url(http://nicovanzyl.com/external/files/img/earth.png) no-repeat;
    background-position: center;
    background-size: 100%;
    border-radius: 300px;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    top: 30%;
    z-index:120;
    -webkit-animation: linear space-rotate 125s infinite;
       -moz-animation: linear space-rotate 125s infinite;
         -o-animation: linear space-rotate 125s infinite;
            animation: linear space-rotate 125s infinite;
}
/*optional if you want a shadow over earth*/
.shadow{
    left: 0;
    top: 30px;
    width: 165px;
    height: 165px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 300px;
    z-index:150;
}

@-webkit-keyframes space-rotate {
  from { -webkit-transform: none; }
  to { -webkit-transform: rotate(360deg); }
}
@-moz-keyframes space-rotate {
  from { -moz-transform: none; }
  to { -moz-transform: rotate(360deg); }
}
@-o-keyframes space-rotate {
  from { -o-transform: none; }
  to { -o-transform: rotate(360deg); }
}
@keyframes space-rotate {
  from { transform: none; }
  to { transform: rotate(360deg); }
}
/*anti clockwise rotation*/
@-webkit-keyframes space-rotate-anti {
  from { -webkit-transform: none; }
  to { -webkit-transform: rotate(-360deg); }
}
@-moz-keyframes space-rotate-anti {
  from { -moz-transform: none; }
  to { -moz-transform: rotate(-360deg); }
}
@-o-keyframes space-rotate-anti {
  from { -o-transform: none; }
  to { -o-transform: rotate(-360deg); }
}
@keyframes space-rotate-anti {
  from { transform: none; }
  to { transform: rotate(-360deg); }
}