Sunday, July 12th, 2009p>The iPhone has had these wicked cool 3D transforms hardware accelerated for awhile. We haven’t seem them in desktop Safari though, until now.
Charles Ying shows us Snow Stack:
Oh, was there some Microsoft plugin launched last week? We don’t need no stinkin’ plugin!
Charles tells us more:
- Larger images load in after 2 seconds for high quality zoomed images.
- State changes are handled via CSS.
- Reflections use CSS masks instead of a Canvas draw (standard box reflections don’t quite work yet).
- Reflections sit on a scaleY(-1.0) coordinate system and are tracked independently, which is surprisingly easy.
- This demo pushed a few performance limits and currently avoids drawing and animating a drop shadow and border.
- On Leopard, animating transforms with a transform list need to have only 1 function to animate in hardware.
- Some expensive CSS selectors are used, and haven’t been fixed yet. (in progress)
- Almost all of this is hardware accelerated on Snow Leopard. About the only thing that isn’t is the networked image loading.
- Key states are tracked manually (timers handle keyboard delay and repeats) so a smooth motion can be achieved when the keys are held down.
- Cell sizes are chosen at initial window load time and don’t change on window resize, although the origin does. It’s rather slow, however, so I may end up changing that.
- To give you a sense of the effort involved, this demo was written over 3 days, a few hours each evening.
All via @joehewitt:
Wow, Safari on Snow Leopard does hardware-acelerated CSS 3D transforms!
Posted by Dion Almaer at 4:43 pm