CSS translateZ ignored

I'm trying to do a parallax effect without using the background-position: fixed property because the image that I have in background doesn't render properly (too zoomed). I have a header and just after, I would like to have a parallax effect between my image and my text ! I found a tutorial that could help me, using the transform: translateZ property.

Here's my HTML code (I also use the Tailwind CSS Framework) :

<section class="parallax_group" id="group-1">
       <div class="parallax_layer base_layer">
           <img src="/static/img/presentation.png" alt="">
       </div>

       <div class="parallax_layer mid_layer font-bold text-7xl text-white">
           <h1 class="font-bold text-7xl text-white">Welcome to </h1>
           <h2 class="text-4xl text-white">Where fiendship also maters</h2>
           <a href="">
               <div class="bg-rose-footer text-gray-700">Shop Now</div>
           </a>
       </div>
   </section>

And here is my CSS code :

.parallax_group {
  height: 760px;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 300px;
  position: relative;
}

.parallax_layer{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  inset: 0;
  -webkit-transform-style: preserved-3d;
}

.base_layer {
  // scale calculation: 1 + ((Z transformation value * -1)/perspective))
  -webkit-transform: translateZ(-300px);
}

The translateZ property is completely ignored

I have tried to put the .base_layer CSS class inside the .parallax_layer one but it still not working.

Here's the tutorial that I have followed : https://www.youtube.com/watch?v=rLrLJQBG_qo&t=1243s