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:

  • Decoding the VMware universe
    VMware’s ecosystem of virtualization offerings is extensive, but the wealth of choice may be confusing rather than helpful. Here we sift through the...
  • Storage University
    If you are new to the storage industry or looking to brush up on the basics, look no further than Storage University. SearchStorage.com has compiled...
  • University Think Lab to 'rival the MIT'
    A futuristic virtual environment centre, said to be the only one of its kind in Europe and the most advanced in the world, was officially launched at...
  • Squirrel: The universal SQL client
    Jim Mason, president of ebt-now, shares his thoughts on the open-source product Squirrel. According to Jim, Squirrel is a great tool for accessing any...
  • ThinkGrid unveils university to boost channel cloud skills
    Cloud platform specialist ThinkGrid has taken steps to increase the practical support resellers looking to move into hosted services are able to get...

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.