Solar System
This is an attempt to recreate our solar system using CSS3 features such as border-radius, transforms and animations by Alex Giron. The result is surprising 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.