This is an attempt to recre­ate our sol­ar sys­tem using CSS3 fea­tures such as bor­der-radi­us, trans­forms and anim­a­tions. The res­ult is sur­pris­ing and quite inter­est­ing.

These past few months I’ve been explor­ing CSS3, try­ing to learn some of it’s new fea­tures and get­ting a feel for which browsers sup­port it. A few weeks back I put out my first exper­i­ment explor­ing @font-face and trans­forms. This time, I set out to exper­i­ment with bor­der-radi­us, and what I thought was going to be a bor­ing little pro­ject turned out to be quite inter­est­ing.

Our Sol­ar Sys­tem in Mod­ern Browsers

Take a look for your­self, using only CSS and HTML I man­aged to cre­ate a small sim­u­la­tion of our sol­ar sys­tem.

For a bet­ter exper­i­ence please view it on Safari, under chrome the anim­a­tions lag for some reas­on.

The Details

Orbits and plan­ets are all cre­ated using bor­der-radi­us, while the anim­a­tion is done via ‑web­kit anim­a­tion prop­er­ties and trans­form. Below are examples of the code used.

bor­der-radi­us

ul.solarsystem li.sun { width: 40px; height: 40px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }

Anim­a­tions & Trans­forms

ul.solarsystem li { -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -webkit-animation-name:orbit; } ul.solarsystem li.earth span { -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; -webkit-animation-name:moon; } ul.solarsystem li.mercury {-webkit-animation-duration:5s;} ul.solarsystem li.venus {-webkit-animation-duration:8s;} ul.solarsystem li.earth {-webkit-animation-duration:12s;} ul.solarsystem li.earth span {-webkit-animation-duration:2s;} ul.solarsystem li.mars {-webkit-animation-duration:20s;} ul.solarsystem li.asteroids_meteorids {-webkit-animation-duration:50s;} ul.solarsystem li.jupiter {-webkit-animation-duration:30s;} ul.solarsystem li.saturn {-webkit-animation-duration:60s;} ul.solarsystem li.uranus {-webkit-animation-duration:70s;} ul.solarsystem li.neptune {-webkit-animation-duration:100s;} ul.solarsystem li.pluto {-webkit-animation-duration:120s;} @-webkit-keyframes orbit { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }

Anim­a­tions and trans­itions will only work on ‑web­kit browsers, oth­er mod­ern browsers will dis­play a stat­ic ver­sion of the sol­ar sys­tem rendered using bor­der-radi­us, with the excep­tion of IE of course.

Inter­net Explorer­’s Par­al­lel Flat Uni­verse:

Yep, in the eyes of Inter­net Explorer our uni­verse is flat and bor­ing.

So there you have it, I think it’s pretty impress­ive what we can accom­plish with a few lines of CSS these days.

Oh, and yes… I kept Pluto ;-)