user profile image

Github repo : https://github.com/juliangarnier/3D-CSS-Solar-System Works better in webkit, buggy in FF, flat in IE. Inspired by http://neography.com/experiment/circles/solarsystem/ and http://nicolasgallagher.com/css-pseudo-element-solar-system/demo/ [update] Added some basic responsive styles


  1. Hats off to you sir, amazing.

  2. That is absolutely ridiculous. You make the rest of us look like amateurs. :)

  3. This is so good!

  4. This is nuts. I love the scale visualization.

  5. Waw, this is fucking amazing. Congratulations, it looks absolutely great, I can't stop playing with it. :)

  6. Thanks all! I had to convert images into base64, my Dropbox account was suffering

  7. Wow, this is really amazing. Great job Julian.

  8. me gusta

  9. Superb work!

  10. Genial!!! Me encanta!

  11. Brilliant work, sir.

  12. This is probably the coolest thing I've ever seen.

  13. Nice! I also did a CSS-only (no JavaScript, no images) planetary system about two months ago https://developer.mozilla.org/en-US/demos/detail/planetary-system/launch

  14. Wicked... and I am not a spammybot

  15. may be an understatement, but EPIC

  16. My mind is fucken blown here.

  17. Simply amazing!!! Excellent work Julian and thanks for sharing!

  18. With skills like these, why not actual learn a programming language?

  19. surreal, amazing work!

  20. Excellent work Julian! Thanks

  21. This is pretty amazing. How much time did it take you to work this all out?

  22. Hard to tell, Approximately 1 month, 1 or 2 hours a day, sometime a little more during the weekend.

  23. The funny thing is that I finished the basics in less than a week, and spent almost a month adding or changing details

  24. Nicely done.

  25. Hi Julian, I'm curious as to how you made the orbits. Is this something that the 3d properties in CSS are allowing?

  26. Inspiring work!

  27. Awesome work. Hats off.

  28. Incredible! Actually the size option is one of the best indicator displays of explaining relative body size visually. But surely the distance one is not accurate? Earth orbit is like 200x bigger than sun radius.

  29. @davidelrizzo The distances are accurate, but the sizes of the planets (and sun) is not, otherwise the sun has to be 1px wide...

  30. Well done. A lot of work went into this, I hope it helps get you good contract.

  31. This is really nice, both from a technical standpoint, and from a science one - it's difficult to find a model that doesn't distort size, or distance, or such in order to be able to display things in a visible manner - the toggles solve for that nicely.

  32. I have a very good code......I want to add my width 90 length 900 helps you do want to get

  33. Really sweet code, Just love how you have every thing connected and flowing so nicely! BTW, is it possible to use this to map every star known to man? Up for a challenge? ;-)

  34. Julian the Awesome

  35. Super neato. Should chuck "outline:none" in there so clicking the UI controls doesn't get random blue rectangles showing up under Chrome :)

  36. Desde Venezuela, felicitaciones por el magnifico trabajo

  37. Fantastic! But what about pluto? :)

  38. WHERE IS PLUTO??? (haha just kidding this is awesome!)

  39. Amazing work. keep it up!

  40. Really Awesome :-)

  41. Incredible

  42. Absolutely incredible!

  43. hell yeah!

  44. OMG!! I ♥ IT !!!! IT'S AWESOME

  45. This is so cool

  46. Awesome Work buddy, Inspiring concept!

  47. Dang it... !!!

  48. So cool :D

  49. WOW!!!!!!!!!!!!!!!! realy nice!!! tks for sharing!!!

  50. Very nice :) if i want do something like that ,what should i learn

  51. Stellar work ...

  52. That is so cool.

  53. WoOoOoOoOoOoOoOoOoW..... I am in awe! #following & #<3

  54. Damn the lightning and z-indexes are spot on! My mind doesn't accept that the sun is not moving ;)

  55. Absolutely amazing!

  56. @juliangarnier Can i embedded on my site ? ( and a credit is yours )

  57. Ya but where is Pluto?

  58. Amazing. By the way, Pluto declared no longer a planet in 2006 :)

  59. This is really really cool. I wish I had the expertise or patience to pull off something like this!

  60. Awesome! You make rest of us look amateurish.

  61. It's amazing but i'm sad the project that i wanted to do i found someone else already did it. You did a great job animation is amazing

  62. There's a lot of great projects on Codepen but this is simply top of the line. Outstanding work. I am truly impressed.

  63. unbelievable!!! SALUTE

  64. yup... I agree with EVERYONE here, this is awesome. Shame on you :D JK

  65. Its clean. Simply Super. I like it lot <3

  66. Very cool design Julian!

  67. Dear codeness!

  68. It is awesome!

  69. For all the animations I have seen, this is by far the coolest. Hats off to the effort.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.