CSS| Are 3D Absolute Items always on top of every other item? - css

Question

so i have an issue, i am developing a website and i'm playing around with 3 dimensional cards. so the problem i run in is basically, no matter which z-index i give the div that should be above it, the card is still always in front. Is this an normal behavior or am i missing something? Thank you really much :)
Heres the HTML:
<div class="project">
<div class="project-title">
<h1>someproject</h1>
</div>
<div class="project-scene">
<div class="project-card">
<div class="project-face project-front">
</div>
<div class="project-face project-back">
<p>blablabla</p>
<img src="../assets/solarflarepi-presentation.gif">
<p>
blablabla
</p>
</div>
</div>
</div>
</div>
And here is the css:
.project{
border: white solid 0.3em;
border-radius: 1em;
margin-bottom: 1em;
margin-left: 1em;
flex: 1;
align-items: center;
}
.project-card{
background-color: transparent;
width: 25em;
height: 26em;
position: relative;
transition: transform 0.5s;
transform-style: preserve-3d;
}
.project-scene{
perspective: 1000px;
}
.project-scene:hover .project-card{
transform: rotateY(180deg);
}
.project-face{
position: absolute;
backface-visibility: hidden;
z-index: 0; /* The Div which should be above it has 5 */
}
.project-back .project-card{
background-color: black;
}
.project-front{
background-color: white;
width: 100%;
height: 100%;
}
.project-back{
background-color: black;
width: 100%;
height: 100%;
transform: rotateY(180deg);
}
.project-title{
background-color: white;
color: black;
}
.project-title h1{
margin: 0;
padding: 0em 0.5em 0em 0.5em;
font-weight: normal;
text-align: center;
}
.project-back img{
width: 25em;
}

Answer 1

In this case z-index do not fix your problem, you must use transform: translateZ(5);
like this:
enter image description here