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)
Comments
thank you…
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).
Thank God for you (and Google search)!
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!)
its not working in chrome. what i have to do? plz help
Hi there,
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.
For WordPress this one has worked for me: http://codecanyon.net/item/flipping-cards-3d-wordpress/4135044
thankyou sir..
thanks !
that is great !
It’s really easy !!
Great Tutorial !!
hello good work you can something like what I have to link but not have click on the name, but ARROW and show your name after
hello good work you can something like what I have to link but not have click on the name,