Tuesday, May 18th, 2010

IE thinks our universe is flat; The universe in CSS3

Category: CSS, Fun

<>p>

Alex Girón, of CSS Beauty, has been playing with CSS3 goodness. His current experiment recreates our solar system spinning around using border-radius, transforms, and animations.

The experiment runs beeeautifully on WebKit Nightly, but for some reason it lags on Chrome.

Alex gives us the deatils:

border-radius

  1. ul.solarsystem li.sun {
  2.     width: 40px;
  3.     height: 40px;
  4.     -webkit-border-radius: 20px;
  5.     -moz-border-radius: 20px;
  6.     border-radius: 20px;
  7. }

Animations and Transforms

  1. ul.solarsystem li {
  2.     -webkit-animation-iteration-count:infinite;
  3.     -webkit-animation-timing-function:linear;
  4.     -webkit-animation-name:orbit;
  5. }
  6. ul.solarsystem li.earth span {
  7.     -webkit-animation-iteration-count:infinite;
  8.     -webkit-animation-timing-function:linear;
  9.     -webkit-animation-name:moon;
  10. }
  11. ul.solarsystem li.mercury {-webkit-animation-duration:5s;}
  12. ul.solarsystem li.venus {-webkit-animation-duration:8s;}
  13. ul.solarsystem li.earth {-webkit-animation-duration:12s;}
  14. ul.solarsystem li.earth span {-webkit-animation-duration:2s;}
  15. ul.solarsystem li.mars {-webkit-animation-duration:20s;}
  16. ul.solarsystem li.asteroids_meteorids {-webkit-animation-duration:50s;}
  17. ul.solarsystem li.jupiter {-webkit-animation-duration:30s;}
  18. ul.solarsystem li.saturn {-webkit-animation-duration:60s;}
  19. ul.solarsystem li.uranus {-webkit-animation-duration:70s;}
  20. ul.solarsystem li.neptune {-webkit-animation-duration:100s;}
  21. ul.solarsystem li.pluto {-webkit-animation-duration:120s;}
  22.  
  23. @-webkit-keyframes orbit {
  24. from { -webkit-transform:rotate(0deg) }
  25. to { -webkit-transform:rotate(360deg) } }

Related Content:

Posted by Dion Almaer at 5:34 pm
2 Comments

++---
2.5 rating from 2 votes

2 Comments »

Comments feed TrackBack URI

It’s slower in Chrome because it’s very heavy on the graphical transforms and compositing. This is where Safari on Mac truly shines, because it uses much more extensive hardware acceleration than Chrome does. Chrome’s JavaScript engine is faster, but Safari’s rendering pipeline is faster.

Comment by theturtle32 — May 18, 2010

Pretty sloppy work – those orbits should be elliptical!

Comment by cancelbubble — May 18, 2010

Leave a comment

You must be logged in to post a comment.