A CodePen by Jorge Epuñan. Pure CSS3 planet translation around a sun - Achieved through CSS3 2D and 3D transformations. *Not optimized *Webkit and FF10+ only

index.html

<div id="sol" class="esfera"></div>
<div id="container">
	<div id="tierra" class="esfera"></div>
</div>

style.css

body 				{background:#000; transform-style:preserve-3d; transform:rotateY(90deg); padding-top:100px;}
.esfera 		{width:100px; height:100px; border-radius:50%; position:absolute; top:25%; left:45%; background:#fff;}
	@keyframes glow {
  	from { box-shadow: #ff4400 0 0 10px; }
  	50%	 { box-shadow: #ff4400 0 0 30px; }
  	to   { box-shadow: #ff4400 0 0 10px; }
	}
#sol 				{width:100px; height:100px; margin-top:50px; box-shadow:#ff4400 0 0 10px; animation-name:glow; animation-iteration-count:infinite; animation-duration:1s; transform:rotateY(-90deg); background:#ef6f00; background:linear-gradient(top,#ef6f00 0%,#ed9a00 100%);}
	@keyframes girando {
    from { transform: rotateY(0deg) translateX(210px);   }
		to   { transform: rotateY(360deg) translateX(210px); }
	}
#container 	{perspective:600px; animation-name:girando; animation-iteration-count:infinite; animation-timing-function:linear; animation-duration:3s; transform-style:preserve-3d;}
	@keyframes rotando {
    from { transform: rotateY(-90deg);   }
		to   { transform: rotateY(-450deg);}
	}
#tierra	{width:50px; height:50px; animation-name:rotando; animation-timing-function:linear; animation-iteration-count:infinite; animation-duration:3s; transform:rotateY(90deg); background:#1e5799; background:linear-gradient(top,#1e5799 0%,#7db9e8 100%); box-shadow: #1E5799 0 0 10px;}