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.

This entry was posted
on Saturday, July 11th, 2009 at 1:41 pm and is filed under Featured, Life.
You can follow any responses to this entry through the RSS 2.0 feed.
Both comments and pings are currently closed.

One thing that, from an open web evangelism point of view when we talk about Flash and Silverlight: This demo works (mostly) in regular Safari 4 too, just with less whizzy effects. That core principal that on the web, content remains accessible.

The regular release-version Safari 4 seems to have some image overlap issues on the selected item, which can be corrected with a higher z-index on the containing div. Would be a great example of the progressive enhancement that these effects that can be implemented with.

[...] Last night, WebKit got more interesting: the hardware-accelerated CSS 3D Transforms spec that is supported on the iPhone came to Leopard. CSS Animations are quite nice to work with on Safari, and this new platform for it enables some pretty cool effects. [...]

[...] Choose the Moon: Pre-launch JSON: What It Is, How It Works, and How to Use It Blog Custom-B… satine.org Snow Stack is Here How to Photograph a Sunset: 6 steps (with pictures) – wikiHow 36 Color Gradient Sets For [...]

“Animating transforms with a transform list must have only 1 function to animate in hardware”

Actually all transform animations will be in hardware unless you have more than one function AND one of those functions is a rotation animation of >= 180 degrees. If you’ve discovered other cases that fallback into software animation, it’s a bug. It would be really helpful if you could report it:

Ah, one thing I forgot. The rule I mentioned before (more than one function AND one of those functions is a rotation animation of >= 180 degrees) only applies to SnowLeopard. On Leopard, your rule (list must have only 1 function) is correct. This is actually overkill. We can animate many (most) function lists in hardware. I will look into tightening up the rule so we can avoid software fallback more often.

Just saw Dave’s comments.
@Dave, a team is doing that in Cooliris. They use C++, OpenGL, ect. Totally different technoligies, but similar results. Cooliris calls this “3D wall”. You download it and install it as a browser plugin or as a desktop application, I think.

[...] Snow Stack is Here So Mr Flash and Silverlight, how do you expect to bat back things like this? Full 3D and reflections support in CSS/Javascript and HTML5 (Requires Snow Leopard) (tags: javascript css 3d webkit) [...]

[...] Here’s a demo of what you can do with CSS3 and a webkit browser (that means chrome and safari). If it stays in webkit and doesn’t get adopted as part of the CSS3 standard then Flash is pretty safe. If it becomes part of the standard – and I see no reason why it wouldn’t in some form very similar to what webkit suggest then Flash might be a little bit more redundant. Sadly – with HTML5 now dropping video codec definitions Flash will definitely be the video presentation layer for a lot of developers for the next few years. Full details at satine. [...]

[...] build of WebKit, and then after that you’re ready to go. Then you can follow the link from the website where the Snow Stack demo is hosted, which’ll lead you to the demo itself. Try this out and tell us how it [...]

[...] Snow Stack new 3D CSS Visual Effects demo using pure HTML, WebKit’s 3D CSS Effects extensions and JavaScript. In a little while we will not need flash any more, with HTML 5 released an implemented in most decent browsers andCSS extensions like snow stacks rolling out. [...]

[...] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform features. There is a YouTube video of the demo [...]

[...] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform features. There is a YouTube video of the demo [...]

[...] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform features. There is a YouTube video of the demo [...]

[...] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform features. There is a YouTube video of the demo [...]

Pick yourself up a copy of Screenflow, your viewers will thank you for it.
Shaky-camming your screen is ugly and aggravating. And Screenflow is easy, clean, and beautiful.

I apologize for coming off as rude and/or arrogant, it’s not my intention. But when I see people taking pictures/videos of their screen where completely unnecessary, well, it’s just a pet peeve of mine.

(When is it necessary? Here’s a personal example; I had a weird Xorg Driver incompatibility some years back, the primary display worked fine, the secondary display was having an acid trip. Screenshotting it didn’t show the problem, so I did take a picture of the two screens physically in order to demonstrate the issue.)

[...] under: Internet, Developer, Snow Leopard Charles Ying over at satine.org has put together an impressive demo using Safari’s forthcoming CSS 3D transform features. There is a YouTube video of the demo [...]

@Jason Sure wish it was that simple, I tried a screen capture, but the frames per second just wasn’t showing the full potential coming out of the animation, so I had to resort to a 3GS shaky cam for a recording.

[...] on the WebKit site a new demo that features CSS 3D Transforms : Poster Circles. We could also see Snow Stack demo at satine.org, and Animated CSS3 Cube at fofronline.com. The CSS 3D Transforms have been [...]

Oh yes the typical ignorance just because you chose an example that may be familiar to people, the cooliris view. And of course the Opera user had to chime in with some flaming. Opera users are always somewhat amusing, both of them. :)

For all of those who think that this is the only thing possible with that technology… REALLY? And electricity can only be used for light bulbs just because that was one of the first use case?

I think this is really exciting for interfaces to come as it finally gives us ways to create immersive user experiences for more than just web applications. Point of sale units for example, right now that’s either a locked Keynote, a locked Director app or if you want something for people to grow eye cancer, PowerPoint in kiosk mode. I hope we can get this soon on a touch display for the POS assistant display we have on during concerts.

[...] name of Charles Ying of Satine.org has developed a new 3D CSS visual effects demonstration called Snow Stack, which runs entirely on JavaScript, native WebKit CSS extensions, and XHTML/HTML. If you’re [...]

This is just like the cooliris app i’ve used for firefox! Like the way this works using only css, webkit & javascript. Great effect, but currently I still prefer jquery carosel effects for displaying images or any sort of gallery/portfolio!

[...] Just how quickly, you ask? Here’s what you can already do in the latest version of Safari/WebKit (even on the iPhone version!), with nothing but CSS, and JavaScript to push it along (source: [...]

[...] really aren’t going to improve that. The real use-cases can be found in examples such as Charles Ying’s Snow Stack: eye-candy and graphics are becoming more important in applications, and going 3D is a logical next [...]

[...] really aren’t going to improve that. The real use-cases can be found in examples such as Charles Ying’s Snow Stack: eye-candy and graphics are becoming more important in applications, and going 3D is a logical next [...]