Subscribe by Email

It’s so much easier with CSS

CSS3 is quickly becoming a replacement for a lot of things Javascript was the only viable option for. The 3D transform effects are amongst the things that at one point would’ve been thought impossible without some sort of hard coding.

Support

Obviously, support is what’s important here. Currently the only support is in IE Platform Previews and Webkit, which it is experimental in. For this tutorial we’re going to be working at making this work in Webkit, So Chrome and Safari.

Transforms

All CSS transforms go through the property transform, or -webkit-transform as we will be using in this tutorial. With transform we can scale, translate, change the perspective, and a bunch of other things.

On top of that, since we’re targetting webkit browsers with -webkit-, other browsers are going to see the back side (the main side), so they won’t miss out on any important information. Lets start by setting up the HTML.

<div id="card-container">
<div id="card">
<div class="back">This is the back of the card</div>
<div class="front">This is the front of the card</div>
</div>
</div>

We want the front to act like the front of the card, and the back to act like the back. So first we have to tell CSS that what we’re doing is in 3D. We’re also going to change the perspective a bit, so that when the animation occurs it won’t feel flat.

We set it to absolute, so that both sides will be on top of each other. We also set the -webkit-backface-visibility to hidden, so that if a plate is facing away from the user, they won’t be able to see it. A transition has also been set, meaning the -webkit-transform that will ease-in and last 1 second. The rest is just basic CSS properties.

Truly amazing. I wanted 6 flipping cards on the same page and I tried doing this with code from a Javascript tutorial, but was only able to make one card flip on the same page (I’m Javascript-challenged).

Firefox has supported all these CSS properties for over a year now, care to update this and remove the “Webkit Only” language (leaving content around in such a state can hurt the web and browser innovation!)

nice and awesome work. Searched the web for this nearly a whole day. The mistake I made till I found this was not to take the
-webkit-attribute but the attribute itself. It works also well in Firefox, if you take the -moz-attribute. I wonder if there is any Opera-attribute, the -o-attribute won’t work. Then is there any IE-attribute? Like so: -ms-…. In Safary I guess it will work, because it’s an Webkit-Browser.