

Paperfold CSS - tilt
https://developer.mozilla.org/en-US/demos/detail/paperfold-css

======
taitems
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...](http://taitems.tumblr.com/post/20267547479/3d-accordion-effect-ux-
lab-006) \- apologies for the self-promotion.

~~~
periferral
While the Mozilla one worked, your example did not work on FF 11.

~~~
zobzu
Likewise fx13 ah the beauty of the "open" web. I bet it works on Chrome - and
nothing else.

~~~
buu700
I'm on Chrome and it didn't work for me.

My prediction: the only person it works for will end up being on IE 6.

------
sunir
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.

~~~
mbostock
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. """

PDF:
[http://www2.parc.com/istl/projects/uir/publications/items/UI...](http://www2.parc.com/istl/projects/uir/publications/items/UIR-1991-03-Mackinlay-
CHI91-PerspectiveWall.pdf)

------
rbarooah
Just like the feature in OSX Mail. It's nice to see how web UI is keeping par
with native development.

------
comex
For reference, this is very similar to the animation OS X Mail.app uses to
expand hidden quoted text.

~~~
mindhunter
This was also the inspiration. Well spotted.

~~~
ams6110
Sad to say you may be in violation of an Apple patent, then.

~~~
mortenjorck
Prior art from Palm, 2009: <http://www.youtube.com/watch?v=jTqa-0uea1w>

------
tambourine_man
Great stuff. I goes crazy on an iPhone iOS 4.2.1, the post spins in 3d space
as you scroll.

<http://i41.tinypic.com/wv48rr.png>

------
calydon
I'm not sure what I did but while messing with the settings at one point the
top slider was bouncing back and forth like a pendulum. Chrome 17

------
lopatin
Isn't this a 3d object and not straight HTML? Therefore I would think it can't
be used on basically any website.

~~~
aaroneous
Just CSS3 3D transforms on plain 'ole DOM objects connected by CSS3
animations.

------
monsterix
Very interesting piece of work. How far is its cross-browser support?

~~~
eliaskg
Works in every browser that supports 3d transforms, namely the latest versions
of Chrome, Firefox, Safari (+ Mobile)

------
pedrolll
Got this weirdness after a while without touching any settings:
<http://i.imgur.com/ebmc0.png>

Chrome 18 osx

~~~
mindhunter
It's a depth-clipping bug in chrome

------
drsim
Hmm. It looks awesome, and I'm all for the physical metaphors approach of
Apple, but how does this enhance usability versus say a standard accordion?

------
mikeflynn
Amazing effect! Here's hoping it's still cool to me after I see it after every
blog's "more posts" link.

~~~
firefoxman1
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.

------
gklitt
Web 3.0? Seriously, CSS like this makes me think web interface development is
entering a new era.

------
MatthewPhillips
This looks a lot like the Clear app's animation for creating a new task.

~~~
pavlov
The same animation is used in Apple's Mail 5 which shipped in Mac OS X Lion.

(Mail hides quoted text at the end of a message by default, and revealing the
text will show this "folded paper" animation.)

------
reason
Something interesting happens if you set all the variables to 0.

~~~
snprbob86
Spoiler alert: I hacked the slider min values to zero with the inspector. The
tab's CPU usage goes off the charts & locks up; infinite loop.

------
moonchrome
Text aliasing is horrible on Chrome 18/Win8.

~~~
TazeTSchnitzel
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.

------
eliaskg
This is just awesome! Great work!

------
tripzilch
why doesn't this work in the latest Opera?

------
wavephorm
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.

~~~
TazeTSchnitzel
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.

~~~
kzrdude
can we call that pure and functional?

------
dustineichler
Is this real? This looks kinda cool, but I don't trust anything on this day of
all days!

