Animated solar system made of CSS markup

The animation is super-smooth - as long as you're using an updated browser, that is

The animation is super-smooth - as long as you're using an updated browser, that is

You don't have to be a web design expert to appreciate this animated model (opens in new tab) of the solar system, another one of the best examples of CSS we've found.

Created by Julian Garnier (opens in new tab), it shows the eight planets orbiting the sun in 3D (yes, you read that right - despite what you got told at school, boffins recently decided that Pluto (opens in new tab) is no longer officially a planet).

How to view it

Drag the bar to make the code or the demo full-screen

Drag the bar to make the code or the demo full-screen

Because the demo uses modern CSS3 properties, it won't work well (or at all) in many older browsers.

We found it flew in Chrome; in the words of its creator, the model "works better in webkit", is "buggy" in Firefox, and "flat" in Internet Explorer.

Code view

The full HTML, CSS and JavaScript is available to view

The full HTML, CSS and JavaScript is available to view

When you visit the page, the screen is split into two. Drag the bar up if you want to see the full code, or down if you want to see the solar system in all its glory.

Simple controls appear on the right-hand side to increase and reduce the speed of the model, and switch between 2D and 3D views.

Shoulders of giants

The demo was inspired by similar projects by Alex Giron (opens in new tab) and Nicolas Gallager (opens in new tab) and Garnier promises to share the full SASS project on social coding hub Github (opens in new tab) soon.

The model is one of a number of HTML, CSS and JavaScript projects to have been uploaded to CodePen, a new app created by CSS-Tricks creator Chris Coyier (opens in new tab), Alex Vazquez (opens in new tab) and Tim Sabat (opens in new tab) to help designers and developers share and fork their work.

CodePen launched in public beta this June and has been described as a cross between jsFiddle (opens in new tab) and Dribbble (opens in new tab).

Have you seen a cool CSS demo? Tell us about it in the Comments!

Now read these:

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of six full-time members of staff: Editor Kerrie Hughes, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, and Staff Writer Amelia Bamsey, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq. 

Topics
CSS