This is a quick DHTML game I built one night and forgot about it. I just added support for iPhone so please check out the demo. The source code is available here, so feel free to add style or expand the game.
I’ve seen this effect used before but most recently in a tech demo for Microsoft’s “Courier”. Below is a snippet of how this menu system works:
The Pullout menu comprises of five HTML elements a,b,c,d and a handle. Elements a,b,c,d are positioned and then skewed to give the effect of a folding object.
The animation I used doesn’t seem natural to me, this was down to my lack of understanding in perspective drawings and transitions. Im sure someone with a better understanding could make a much better example from this concept. Maybe if images, gradients and shadows were introduced the effect would start to feel more natural.
If anyone does improve the menu could you let me know. I’d be really interested to see it.
This is a pseudo way to flip HTML elements on their backs. This is a way of doing it now without waiting for a possible introduction of 3D Transforms from webkit.
I first used flipping a few years ago when building touch screen HTML applications for kiosks. The animation would basically make the elements width 0 whilst moving the elements position right. This would give the effect that the element had been “sort of” flipped. It was a very simple solution and would only work if the animation was fast. Tricking the human eye into thinking it was actually flipped.
So what’s changed
Well firstly CSS3 allows you to skew, not screw! but skew. Skew allows you to give a simple pseudo 3D effect. It’s not ideal for this example but until 3D Transforms come in, it greatly adds to the effect of tricking the eye into thinking the element has been flipped.
The animation works in three steps:
The first step goes from: [width: curWidth, left: 0, skew: 0deg 0deg] to: [width: 0, left: initialWidth/2, skew: 0deg 20deg]. This gives the effect that the element has been flipped like a playing card onto its thinnest edge, essentially you cannot see it at this stage.
The third and final step animates the element from it’s side to it’s back-facing plane. The animation goes from: [width: 0, left: initialWidth/2, skew: 0deg -20deg] to: [width: initialWidth, left: 0, skew: 0deg 0deg]. Notice the skew changes from step one’s finishing position to a negative value, without doing this it looks as if the card has gone 90deg and back again.
Flipping an element with background-image set:
When I initially did this a few years ago I would use an image tag and just flip that. This was because changing the width of an image stretches the image and using background-image wouldn’t do that, until now that is. By using the CSS3 property “background-size” I can set the width to 100%, this makes the background-image stretch as the container does.
Why not use CSS3 animation in webkit?
Take a look at the code in firebug and see how it works. If you know how to use firebug’s console try setting the effects speed using “effectSpeed = 1000;”. This slows the animation down. Please leave your comments and thoughts below.