Flipping Crazy – CSS3

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.

Space carousel

View Demo

About Flipping

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 Process

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 second step triggers any javaScript you want to happen. In my examples I add a class to the element called “toggleTrue” which can be used to change the CSS properties of the box. Potentially videos, images or text could be inserted creating a sort of flipping lightbox.

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?

I did experiment with CSS3 animations and failed quite quickly. The problem i found was the absence of a javaScript callback method. There might be one but I couldn’t work out how and without a callback, CSS animations seem quite useless to me.

I also tried using CSS3 3D transforms. This looks much better than skew because the element is actually flipped – No moving the elements position, no tricks of the eye, no fakery! The problem was that JavaScript manipulation of these CSS3 3D transforms seemed to create some crazy artefacts in the picture.

Finally

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.

9 thoughts on “Flipping Crazy – CSS3”

  1. Neat demo. Should also work in Opera if you include the standard box-shadow and border-radius styles in addition to the -moz- and -webkit- ones (and add an OTransform option in the javascript).

  2. Awesome stuff, I’ve got a project coming up which could make excellent use of this. Any plans to upload your work to the forge?

  3. @Moork: Might add Opera support tonight but only 2% of visitors are using it. This will become so much easier when its standardised.

    @David: I would submit my work if it was good enough for forge but it’s all written quickly with no thought for classes. I am however writing a game in mootools that I will submit before the end of March. – It’s a ripoff of a famous iPhone game but very fun.

  4. According to this, there is a CSS animation callback function, but the name of the event is vendor prefixed:

    http://stackoverflow.com/questions/6186454/is-there-a-callback-on-completion-of-a-css3-animation

    I’m disappointed that Javascript is required. It would be nice if the CSS spec included “from”, “to” and “finally” blocks, instead of relying on Javascript to handle the “complete” event.

    I’m looking into Grant Skinner’s new animation library – http://createjs.com/

Leave a Reply

Your email address will not be published. Required fields are marked *