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
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
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:
- 10 stunning examples of animation with CSS3
- 101 CSS and JavaScript tutorials to power up your skills
- 10 eye-popping images created purely in CSS3
