Tuesday, May 18th, 2010
IE thinks our universe is flat; The universe in CSS3
<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
CSS:
-
-
ul.solarsystem li.sun {
-
width: 40px;
-
height: 40px;
-
-webkit-border-radius: 20px;
-
-moz-border-radius: 20px;
-
border-radius: 20px;
-
}
-
Animations and Transforms
CSS:
-
-
-
ul.solarsystem li {
-
-webkit-animation-iteration-count:infinite;
-
-webkit-animation-timing-function:linear;
-
-webkit-animation-name:orbit;
-
}
-
ul.solarsystem li.earth span {
-
-webkit-animation-iteration-count:infinite;
-
-webkit-animation-timing-function:linear;
-
-webkit-animation-name:moon;
-
}
-
ul.solarsystem li.mercury {-webkit-animation-duration:5s;}
-
ul.solarsystem li.venus {-webkit-animation-duration:8s;}
-
ul.solarsystem li.earth {-webkit-animation-duration:12s;}
-
ul.solarsystem li.earth span {-webkit-animation-duration:2s;}
-
ul.solarsystem li.mars {-webkit-animation-duration:20s;}
-
ul.solarsystem li.asteroids_meteorids {-webkit-animation-duration:50s;}
-
ul.solarsystem li.jupiter {-webkit-animation-duration:30s;}
-
ul.solarsystem li.saturn {-webkit-animation-duration:60s;}
-
ul.solarsystem li.uranus {-webkit-animation-duration:70s;}
-
ul.solarsystem li.neptune {-webkit-animation-duration:100s;}
-
ul.solarsystem li.pluto {-webkit-animation-duration:120s;}
-
-
@-webkit-keyframes orbit {
-
from { -webkit-transform:rotate(0deg) }
-
to { -webkit-transform:rotate(360deg) } }
-
Related Content:
Rate the above post
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.
Pretty sloppy work – those orbits should be elliptical!