Using transform translate to create a 3d affect - html

Question

I am not able to use transform: translateZ to change the position of back div to create a 3d affect . There are no changes at all in the image. I have used perspective and perspective origin to try and create a 3d affect. The front and back div are respectively the front and back sides of a cube. Here is the below code written in css and html respectively
:root {
--boxColor: #0ff7
}
body {
align-items: center;
justify-content: center;
display: flex;
background-color: black;
min-height: 100vh;
font-size: 50px;
}
.scene {
position: relative;
transform-style: preserve-3d;
}
.cube-container {
perspective: 100px;
perspective-origin: 50% 0%;
}
.cube {
height: 100px;
width: 100px;
}
.front {
height: 100px;
width: 100px;
background: rgb(62, 86, 226);
opacity: 0.5;
}
.back {
height: 100px;
width: 100px;
background: rgb(62, 86, 226);
opacity: 0.5;
top: -100vh;
position: absolute;
transform: translateZ(100px)
}
<div class="scene">
<div class="cube-container">
<div class="cube">
<div class="front">
</div>
<div class="back">
</div>
<div class="top">
</div>
<div class="bottom">
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
</div>

Answer 1

You missed transform-style: preserve-3d; on .cube and I would also use position: absolute; for .front. I dont understand the perspective perfectly, but its common to use higher numbers like: perspective: 500px;.
Hope it helped! :)
:root {
--boxColor: #0ff7
}
body {
align-items: center;
justify-content: center;
display: flex;
background-color: black;
min-height: 100vh;
font-size: 50px;
}
.scene {
position: relative;
transform-style: preserve-3d;
}
.cube-container {
perspective: 500px;
perspective-origin: 50% 0%;
}
.cube {
height: 100px;
width: 100px;
transform-style: preserve-3d;
transform: rotateY(20deg);
}
.front {
position:absolute;
height: 100px;
width: 100px;
background: red;
opacity: 0.5;
}
.back {
position: absolute;
height: 100px;
width: 100px;
background: blue;
opacity: 0.9;
transform: translateZ(-100px);
}
<div class="scene">
<div class="cube-container">
<div class="cube">
<div class="front">
</div>
<div class="back">
</div>
<div class="top">
</div>
<div class="bottom">
</div>
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
</div>