You won't believe this planetary ballet is made without use of plugins!
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 of the solar system, another one of the best examples of CSS we've found.
Created by Julian Garnier, 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 is no longer officially a planet).
How to view it
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.
Latest Videos From Creative Bloq
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
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 and Nicolas Gallager and Garnier promises to share the full SASS project on social coding hub Github 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, Alex Vazquez and Tim Sabat 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 and Dribbble.
Have you seen a cool CSS demo? Tell us about it in the Comments!
