How do I create 3D perspective using CSS3? - html

Question

I have been trying to create a 3D looking card-flip type of animation for a project I've been working on. Unfortunately my animation doesn't look entirely 3D.
I've been using this guide. In the first example the person managed to make it look like the windows background was flipping. However when I tried to use the same code on JSFiddle the result was not the same as his.
His demo code made the effect below. When the card is being flipped it causes one side to get smaller giving the impression of perspective:
On my JSFiddle using his code (except a different background), the sides appear to stay the same size the entire time:
Can someone explain to me what I have missed, or how to get the same perspective effect he had on his website? Thanks in advance.
His HTML code:
<div id="f1_container">
<div id="f1_card" class="shadow">
<div class="front face">
<img src="/images/Windows%20Logo.jpg"/>
</div>
<div class="back face center">
<p>This is nice for exposing more information about an image.</p>
<p>Any content can go here.</p>
</div>
</div>
</div>
His CSS code:
#f1_container {
position: relative;
margin: 10px auto;
width: 450px;
height: 281px;
z-index: 1;
}
#f1_container {
perspective: 1000;
}
#f1_card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: all 1.0s linear;
}
#f1_container:hover #f1_card {
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.face.back {
display: block;
transform: rotateY(180deg);
box-sizing: border-box;
padding: 10px;
color: white;
text-align: center;
background-color: #aaa;
}

Answer 1

See where he says he's stripped the vendor prefixes out of his CSS to keep things clean? I'm betting that's your problem. Some of those CSS properties aren't fully standard, but are implemented in different browsers with different vendor prefixes. I'm not actually sure which ones, but Google can help with that.
Edit: Hmm. Well, the CSS is the culprit anyway, but I don't actually see a lot of vendor prefixes. I pulled his actual CSS off of the page, and pasted it in place of the "clean" CSS you used, which makes the fiddle work. His real CSS is:
#f1_container {
height: 281px;
margin: 10px auto;
position: relative;
width: 450px;
z-index: 1;
}
#f1_container {
perspective: 1000px;
}
#f1_card {
height: 100%;
transform-style: preserve-3d;
transition: all 1s linear 0s;
width: 100%;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
box-shadow: -5px 5px 5px #AAAAAA;
transform: rotateY(180deg);
}
.face {
backface-visibility: hidden;
height: 100%;
position: absolute;
width: 100%;
}
.face.back {
-moz-box-sizing: border-box;
background-color: #AAAAAA;
color: #FFFFFF;
display: block;
padding: 10px;
text-align: center;
transform: rotateY(180deg);
}

Answer 2

They had some CSS incorrect...in the example, he had class .back.face, which should have been .face.back (not why it wasn't working, as pointed out. Just cleaned it up). Other issues were the culprit as other posters pointed out. I've created a new jsFiddle. I'd go the jQuery flip plug-in over this though, as IE will have a hard time rendering such effect.
http://jsfiddle.net/JJrHD/1/