In CSS flip,TransformZ elements not on top - css

Question

I have the following snippet to illustrate this issue.
According to everything I have read, elements positioned using transformZ should be on top as they are 'closer.' I can't position the active/flipped card 'on top' using z-index because flickering occurs during the transition. Yet the elements are positioned in the default order of the browser, which means the later elements are on top. Transform-style and perspective are both applied to the parents.
Why aren't the closer elements on top?
.card {
position: relative;
width: 33.333%; height: 12rem;
float: left;
transform-style: preserve-3d;
perspective: 30rem;
}
.front, .back {
position: absolute;
width: 100%; height: 100%;
transition: transform 1s;
backface-visibility:hidden;
}
.front {
background-color: #66ccff;
}
.back {
background-color: #dd8800;
transform: rotateY(180deg);
}
.card:hover .front{ transform: rotateY(180deg);}
.card:hover .back { transform: rotateY(360deg) translateZ(5em);}
.card2 {
position: relative;
width: 33.333%; height: 12rem;
perspective: 30rem;
float: left;
}
.front2, .back2 {
position: absolute;
width: 100%; height: 100%;
transition: transform 1s;
backface-visibility:hidden;
}
.front2 {
background-color: #66ccff;
}
.back2 {
background-color: #dd8800;
transform: rotateY(180deg);
z-index: 99;
}
.card2:hover .front2 { transform: rotateY(180deg);}
.card2:hover .back2 { transform: rotateY(360deg) translateZ(5em);}
.card3 {
position: relative;
width: 33.333%; height: 12rem;
perspective: 30rem;
float: left;
}
.front3, .back3 {
position: absolute;
width: 100%; height: 100%;
transition: transform 1s;
backface-visibility:hidden;
}
.front3 {
background-color: #66ccff;
}
.back3 {
background-color: #dd8800;
transform: rotateY(180deg);
z-index: 99;
}
.card3:hover .front3 { transform: rotateY(180deg);}
.card3:hover .back3 { transform: rotateY(360deg) translateZ(5em);}
<div class="card">
<div class="front">
<span>Front</span>
</div>
<div class="back">
<span>Back</span>
</div>
</div>
<div class="card2">
<div class="front2">
<span>Front</span>
</div>
<div class="back2">
<span>Back</span>
</div>
</div>
<div class="card3">
<div class="front3">
<span>Front</span>
</div>
<div class="back3">
<span>Back</span>
</div>
</div>

Answer 1

It's because the use of persepctive create a stacking context
Using this property with a value different than 0 and none creates a new stacking context. Also, in that case, the object will act as a containing block for position: fixed elements that it contains.ref
So what you said is all true but it happens inside the card element then the card elements are positionned considering the tree order.
An easy fix is to adjust z-index of card element considering some delay to avoid the bad effect.
.card {
position: relative;
width: 33.333%; height: 12rem;
float: left;
transform-style: preserve-3d;
perspective: 30rem;
z-index:0;
transition:z-index 0s .5s;
}
.front, .back {
position: absolute;
width: 100%; height: 100%;
transition: transform 1s;
backface-visibility:hidden;
}
.front {
background-color: #66ccff;
}
.back {
background-color: #dd8800;
transform: rotateY(180deg);
}
.card:hover .front{ transform: rotateY(180deg);}
.card:hover .back { transform: rotateY(360deg) translateZ(5em);}
.card:hover {
z-index:1;
}
<div class="card">
<div class="front">
<span>Front</span>
</div>
<div class="back">
<span>Back</span>
</div>
</div>
<div class="card">
<div class="front">
<span>Front</span>
</div>
<div class="back">
<span>Back</span>
</div>
</div>
<div class="card">
<div class="front">
<span>Front</span>
</div>
<div class="back">
<span>Back</span>
</div>
</div