Creating ::after pseudo element causing problems with backface-visibility - html

Question

I'm trying to create a flip card that has a shadow that fades in and out as it flips. I've read that the most efficient way (in terms of rendering) to animate a shadow is to create an ::after pseudo element with opacity of 0 and fade the shadow in. I'm attaching two snippets, one without the shadows that works fine, and the second that has the shadows and has a weird effect. Essentially, when the pseudo elements are there, the backface-visiblity property seems to glitch (or I'm missing something) but basically the back of the card shows immediately before it's even flipped over. I've slowed down the animation and added a red shadow to the back of the card so that it's easy to see what all is happening.
Thanks in advance.
.card {
perspective: 50rem;
background-color: #fff;
box-shadow: 5px 10px 10px rgba(51, 51, 51, 0.8);
width: 200px;
height: 300px;}
.card--flip {
background: none;
box-shadow: none; }
.card__side {
height: 400px;
width: 100%;
box-shadow: none;
background-color: #777;
transition: all 3s ease;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden; }
.card__side--front::after {
box-shadow: 5px 10px 10px rgba(51, 51, 51, 0.8);
opacity: 1;
transition: all 3s ease; }
.card__side--back {
transform: rotateY(-180deg); }
.card__side--back::after {
box-shadow: 5px 10px 10px rgba(255, 0, 0, 0.8);
opacity: 0;
transition: all 3s ease; }
.card:hover .card__side--front {
transform: rotateY(180deg); }
.card:hover .card__side--front::after {
opacity: 0; }
.card:hover .card__side--back {
transform: rotateY(0); }
.card:hover .card__side--back::after {
opacity: 1; }
.card__header {
padding: 2rem; }
.card__main {
padding: 2rem; }
WORKING
<div class="card card--flip">
<div class="card__side card__side--front">
<div class="card__header">
<h1>FRONT</h1>
</div>
<div class="card__main">front</div>
</div>
<div class="card__side card__side--back">
<div class="card__header">
<h1>BACK</h1>
</div>
<div class="card__main">back</div>
</div>
</div>
.card {
height: 400px;
width: 200px;
perspective: 50rem;
background-color: #fff;
box-shadow: 5px 10px 10px rgba(51, 51, 51, 0.8); }
.card--flip {
background: none;
box-shadow: none; }
.card__side {
width: 100%;
box-shadow: none;
background-color: #777;
transition: all 3s ease;
position: absolute;
top: 0;
left: 0;
backface-visibility: hidden; }
/* ADDED PSEUDO ELEMENT */
.card__side::after {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -10;
width: 100%;
height: 100%; }
.card__side--front::after {
box-shadow: 5px 10px 10px rgba(51, 51, 51, 0.8);
opacity: 1;
transition: all 3s ease; }
.card__side--back {
transform: rotateY(-180deg); }
.card__side--back::after {
box-shadow: 5px 10px 10px rgba(255, 0, 0, 0.8);
opacity: 0;
transition: all 3s ease; }
.card:hover .card__side--front {
transform: rotateY(180deg); }
.card:hover .card__side--front::after {
opacity: 0; }
.card:hover .card__side--back {
transform: rotateY(0); }
.card:hover .card__side--back::after {
opacity: 1; }
.card__header {
padding: 2rem; }
.card__main {
padding: 2rem; }
NOT WORKING
(added pseudo ::after class)
<div class="card card--flip">
<div class="card__side card__side--front">
<div class="card__header">
<h1>FRONT</h1>
</div>
<div class="card__main">front</div>
</div>
<div class="card__side card__side--back">
<div class="card__header">
<h1>BACK</h1>
</div>
<div class="card__main">back</div>
</div>
</div>

Answer 1

Add the following to your class:
.card {
...
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}