CSS transform transition backface-visibility not working - css

Question

I'm creating a transition that flips a contact card (link) but the backface-visibility property is giving me problems.
As can be seen in the codepen, nothing disappears after being flipped (even though it has turned its "backface" to the screen).
I tried creating a child div inside the card, to inherit its size and tried flipping it from the start so that, when the card were to be flipped, that div would have been on its front side and covered the rest.
The backface-visibility, though, doesn't work on that child div:
.cardBack{
padding:20px 50px;
background-color:white;
position:absolute;
width:inherit;
height:inherit;
backface-visibility:hidden;
transform:rotateX(180deg);
z-index:101;
}
If I either remove the transform:rotateX or the backface-visibility property, the .cardBack div covers the rest of the content both when the card is flipped and unflipped.
If I remove them both, it does the exact opposite of what I want: the .cardBack div obscures the content when the card is not flipped, and becomes invisible when the card is flipped.
If I leave it like this, the .cardBack div is never visible.

Answer 1

Here's the updated code.
Chrome has a weird bug when rotating elements, so backface-visibility was needed after all, just not on the .card itself.
$(document).ready(function(){
$(".card").click(function(){
$(this).toggleClass("turned");
$(this).toggleClass("unturned");
});
});
body{
background-color:#5AEDBC;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow:hidden;
}
.card:after{
box-sizing:border-box;
backface-visibility:hidden;
display:block;
content:'';
width:200px;
height:400px;
left:380px;
position:absolute;
background: cadetblue;
transform:rotateZ(-40deg);
backface-visibility:hidden;
}
.card{
padding:20px 50px;
overflow:hidden;
position:absolute;
width:350px;
height:120px;
display: flex;
justify-content: center;
align-items:center;
flex-direction: row;
background-color:white;
font-family:'Raleway', sans-serif;
border:5px solid rgba(0,100,100, 0.75);
color:#008A45;
margin-top:100px;
transition:all 1s ease;
transform-origin:0 100%;
transform-style: preserve-3d;
}
.cardBack {
width:100%;
height:100%;
position:absolute;
top: 0;
left: 0;
background-color:white;
z-index:101;
}
.card.unturned .cardBack{
opacity: 0;
transition: opacity 0.25s ease 0.25s;
}
.card.turned .cardBack{
opacity: 1;
transition: opacity 0s ease 0.15s;
}
/* this is needed for chrome */
.card > * {
backface-visibility: hidden;
}
/* */
.card.turned{
transition:all 1s cubic-bezier(.17,.67,.59,1.35);
transform:rotateX(-180deg);
}
.info{
display: flex;
justify-content: center;
flex-direction: column;
text-align:right;
backface-visibility:hidden;
}
.title{
font-size:26px;
font-weight:bold italic;
color:black;
padding:5px 0;
display:block;
}
.desc{
font-size:18px;
color:#ccc;
padding:5px 0;
display:block;
}
.img{
border-radius: 50%;
width: 90px;
height: 90px;
margin-left:20px;
backface-visibility:hidden;
z-index:100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/>
<div class="card unturned">
<div class="cardBack"></div>
<div class="info"><span class="title">Interesting person 1</span><span class="desc">Description of the interesting person 1</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>
</div>
<div class="card unturned">
<div class="cardBack"></div>
<div class="info"><span class="title">Interesting person 2</span><span class="desc">Description of the interesting person 2</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>
</div>
<div class="card unturned">
<div class="cardBack"></div>
<div class="info"><span class="title">Interesting person 3</span><span class="desc">Description of the interesting person 3</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>
</div>
View on Codepen.io