Woah, this is freaky. I just posted a similar experiment to my personal collection minutes apart. There are some fundamental limitations to CSS3 animation at the moment, like not being able to animate gradient backgrounds. You can read about it here: http://taitems.tumblr.com/post/20267547479/3d-accordion-effe... - apologies for the self-promotion.
It's unpublished because it doesn't work very well, (webkit only I think) but it does 'work' on arbitrary content and will create a seam even in the middle of a line of text.
Great minds think alike? If you're looking for feedback, how might you make the actual background (the dark blue) not show when the animation runs? And maybe something interesting faux content like a feed of some sort? Those two things would make this comparable to the Moz demo in every way.
I fixed up Firefox support. Strangely, all the 3D transform examples have always mentioned something like "perspective: 1000". It's always been some imaginary unit. Firefox requires "1000px" for it to work.
I'm interested in what happened when I only partially folded the items.
What's intriguing about using 3D this way is that, like a zoomable user interface, it can reduce the visual space that lower priority visual items take up but still hint at their semantic meaning.
However, I also noticed the supposedly less important information actually looks more interesting than the top-level content (which is flat on the screen), and so it became a distraction and backfired.
If you like that idea, you might like the Perspective Wall (CHI '91) by Mackinlay, Robertson and Card. Abstract:
"""
Tasks that involve large information spaces overwhelm workspaces that do not support efficient use of space and time. For example, case studies indicate that information often contains linear components, which can result in 2D layouts with wide, inefficient aspect rations. This paper describes a technique called Perspective Wall for visualizing linear information by smoothly integrating detailed and contextual views. It uses hardware support for 3D interactive animation to fold wide 2D layouts into intuitive 3D visualizations that have a center panel for detail and two perspective panels for context. The resulting visualization supports efficient use of space and time.
"""
I remember seeing mindhunter presenting this the first time. The effect was cool. But seeing him jump up and down on stage because he managed to get it working. Way cooler!
If history is any indication, I would expect it to play out like this:
1. A few awesome sites adopt it first.
2. Eventually everyone catches on.
3. People take it *way* overboard.
4. Users become thoroughly annoyed.
5. Eventually return to sanity.
Chrome's text aliasing for CSS transforms is horrendous. It's because they don't use hardware acceleration (something Safari does by default, quite beautifully), meaning they render things in software poorly for greater performance.
It's great, but I wish I didn't have to do this in CSS. When you look at the source code, it doesn't look like styling at all, it looks like programming. As soon as your start calling bezier functions in a static styling language, you know something's not right. This type of coding would be much easier to do in JavaScript.
"This type of coding would be much easier to do in JavaScript."
You could do this in JavaScript by manipulating the DOM directly - that's what libraries such as jQuery offer, but having easing functions for transitions belongs as part of the styling[1], unless you're saying that CSS should only be for static layouts?
True, but I like being able to do this declaratively. You don't incrementally change it with code, you define a mathematical function against time for the transformation.
Half of the CSS code is used for the demo interaction (time changing, showing the helper elements and for debugging [grouping all animated elements to change the transition-duration all at one]).
