CSS: backface-visibility not working? - html

Question

I'm trying to create a card flipping effect, but I can't get the backface-visibility: hidden; working. What am I doing wrong?
.content {
width: 100%;
height: 70vh;
margin-left: auto;
margin-right: auto;
position: relative;
top: 50px;
}
.card {
margin: 10px;
width: 300px;
height: 450px;
border: 1px solid black;
float: left;
position: relative;
left: 10%;
background-color: green;
transition: all 0.6s ease;
}
.card:hover {
transform: rotateY(180deg);
}
.front, .back {
width: 300px;
height: 450px;
position: absolute;
backface-visibility: hidden;
}
<div class="content">
<div class="card">
<div class="front">
<p>hello</p>
</div>
<div class="back">
<p>goodbye</p>
</div>
</div>
</div>

Answer 1

Instead of rotating the parent, you have to rotate the two sides individually.
.content {
width: 100%;
height: 70vh;
margin-left: auto;
margin-right: auto;
position: relative;
top: 50px;
}
.card {
margin: 10px;
width: 300px;
height: 450px;
float: left;
position: relative;
left: 10%;
}
.front,
.back {
width: 300px;
height: 450px;
position: absolute;
backface-visibility: hidden;
transition-duration: 600ms;
border: 1px solid black;
}
.front {
background-color: green;
transform: none;
}
.back {
background-color: red;
transform: rotateY(180deg);
}
.card:hover .front {
transform: rotateY(180deg);
}
.card:hover .back {
transform: none;
}
<div class="content">
<div class="card">
<div class="front">
<p>hello</p>
</div>
<div class="back">
<p>goodbye</p>
</div>
</div>
</div>

Answer 2

http://jsfiddle.net/tj3eacxL/
Your original CSS is at the top. The necessary changes are:
.card {
-webkit-transform-style: preserve-3d;
background: none; /* Apply a background colour to the whole card to cover up the faces */
}
.back {
transform: rotateY(180deg); /* because the back should be flipped initially when it's in the back */
}
.front, .back {
background-color: green;
}

Answer 3

Here is a good example how do flip cards...
CSS:
.content {
perspective: 1000;
}
.content:hover .card {
transform: rotateY(180deg);
}
.content, .front, .back {
width: 300px;
height: 450px;
}
.front, .back {
border: 1px solid black;
background: green;
}
.card {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
}
.content:hover .card {
transform: rotateY(180deg);
}