This is an attempt to recre¬≠ate our solar sys¬≠tem using CSS3 fea¬≠tures such as border-radius, trans¬≠forms and anim¬≠a¬≠tions by Alex Giron. The res¬≠ult is sur¬≠pris¬≠ing and quite interesting. The orbits / paths are created using the borders with
border-radius to create concentric circles and are positioned absolutely. The planets are also created using this way and are animated using
@keyframes with varying timings. Asteroids and other things like the background are images and are animated in the same way.
The information about the planets and stars is done using the transition in which a hidden
p tag is shown when it's respective heading is hovered. This demo works best in Safari / Chrome and Firefox only.