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.

#card {
	-webkit-transform-style: preserve-3d;
	-webkit-perspective: 1000;
	width: 250px;
	height: 250px;
	position: relative;
}	

Next we want to set up the main CSS information on the front and back plates.

.back, .front {
	position: absolute;
	-webkit-backface-visibility: hidden;
	-webkit-transition: -webkit-transform 1s ease-in;
	width: 100%;
	height: 100%;	
	padding: 20px;
	font-family: Helvetica, Arial, sans-serif;
	color: #fff;	
	font-weight: bold;
	box-shadow: inset 0px 0px 20px rgba(0,0,0,0.4);
	border-radius: 4px;
}

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.

There are a few specific settings too, for each plate:

.back {
	-webkit-transform: rotateY(180deg);
	background: url('http://www.html5canvastutorials.com/blog/goose.jpeg');
	overflow: hidden;
}	
.front {
	background: #7f37c2;
}

So we’ve rotated the back plate around so it’s facing away from the user. Now we want on hover the plates to rotate, showing the other side.

#card-container {
	display: inline-block;
	text-align: justify;
}	
#card-container:hover .back {	
	-webkit-transform: rotateY(0deg);
}
#card-container:hover .front {		
	-webkit-transform: rotateY(-180deg);
}

ALL CSS:

#card {
	-webkit-transform-style: preserve-3d;
	-webkit-perspective: 1000;
	width: 250px;
	height: 250px;
	position: relative;
}	
.back, .front {
	position: absolute;
	-webkit-backface-visibility: hidden;
	-webkit-transition: -webkit-transform 1s ease-in;
	width: 100%;
	height: 100%;	
	padding: 20px;
	font-family: Helvetica, Arial, sans-serif;
	color: #fff;	
	font-weight: bold;
	box-shadow: inset 0px 0px 20px rgba(0,0,0,0.4);
	border-radius: 4px;
}
.back {
	-webkit-transform: rotateY(180deg);
	background: url('http://www.html5canvastutorials.com/blog/goose.jpeg');
	overflow: hidden;
}	
.front {
	background: #7f37c2;
}
#card-container {
	display: inline-block;
	text-align: justify;
}	
#card-container:hover .back {	
	-webkit-transform: rotateY(0deg);
}
#card-container:hover .front {		
	-webkit-transform: rotateY(-180deg);
}

ALL 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>

And that’s it! Put it all together and you get this: (Webkit only)