Css parallax with translatez images overflow container

Question

I'm trying to implement parallax effect similar to background-attachment: fixed. And everything works fine if only the first element has translateZ, but if 2 or more sections have translateZ property images begin to overflow sections. Could anybody help me understand what's happening and how to fix it. Thanks in advance.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/main.css" />
    <title>Skeleton</title>
  </head>
  <body>
    <main class="wrapper">
      <section class="section section-parallax">
        <img src="./assets/img/bg-hero.jpg" alt="" class="parallax-bg" />
      </section>
      <section></section>
      <section class="section section-parallax">
        <img src="./assets/img/discover-bg.jpg" alt="" class="parallax-bg" />
      </section>
      <section class="section section-parallax">
        <img src="./assets/img/about-bg.jpg" alt="" class="parallax-bg" />
      </section>
    </main>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js"
      integrity="sha512-f5HTYZYTDZelxS7LEQYv8ppMHTZ6JJWglzeQmr0CVTS70vJgaJiIO15ALqI7bhsracojbXkezUIL+35UXwwGrQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script src="./js/app.js"></script>
  </body>
</html>

css:

.wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  perspective: 10px;
}

.section {
  height: 100%;
  position: relative;
  border: 1px solid red;
  transform-style: preserve-3d;
  z-index: -1;
}
.section img {
  position: absolute;
  inset: 0;
  object-fit: contain;
  transform: translateZ(-5px) scale(1.5);
  z-index: -1;
}

Css parallax with translatez images overflow container

0 Answers0