Watch this: Hardware-accelerated 3D CSS is coming to a browser near you!

Watch this: Hardware-accelerated 3D CSS is coming to a browser near you!

We’ve all come to live with browser plugins. The still-no-Flash iPhone occasionally and painfully reminds us of the fact that today’s web presentation partially relies on non-standard software which is subject to commercial interests. A couple of days ago Microsoft released the next version of it’s Flash competitor, Silverlight.

Charles H. Ying took a different approach and brings us Snow Stack, a stunning 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript:

httpvh://www.youtube.com/watch?v=3R6sb4NO25E

If you’d like to try yourself, visit the live demo (Arrow Keys to move, Space to toggle magnify mode, continue to move right to load more images).

For the geeky tech details, here’s an excerpt of Charles’ notes:

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.
Animating transforms with a transform list must have only 1 function to animate in hardware.
Snow Stack’s 3D transforms, transform and opacity animations all run on the GPU. Layout and networked image loading happens on the CPU.
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.
The computedStyle transform matrix is used to calculate how far away the dolly is from the target image, which is then used to assign a scaled rotation to the “camera”. Ideally, this might be done a different way, but the results are pretty good, and fast.
To give you a sense of the effort involved, this demo was written over 3 days, a few hours each evening.
  • 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.
  • Animating transforms with a transform list must have only 1 function to animate in hardware.
  • Snow Stack’s 3D transforms, transform and opacity animations all run on the GPU. Layout and networked image loading happens on the CPU.
  • 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.
  • The computedStyle transform matrix is used to calculate how far away the dolly is from the target image, which is then used to assign a scaled rotation to the “camera”. Ideally, this might be done a different way, but the results are pretty good, and fast.
  • To give you a sense of the effort involved, this demo was written over 3 days, a few hours each evening.

It’s fascinating to see how browsers evolve. The ultimate question will be, whether users finally gained the power to push the web forward or whether we still have to rely on the lowest common denominator.

Read next: One for all the Fan Boys. Windows 95 running on an iPhone.

Shh. Here's some distraction

Comments