TranslateZ 在 html 容器元素的底部添加额外的白色 space

Question

我正在尝试通过应用 3-d 变换创建视差效果，其中不同的元素以不同的速度滚动

问题

我有一个 class 为 parallax 的容器。每当我在其中添加一个 div 其中包含在 Z 坐标处转换的多个层时，容器底部会添加额外的白色 space，class 为 parallax

如何去除多余的白色 space？

代码

body {
  margin: 0;
}

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

.parallax__group {
  height: 100vh;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.title {
  font-size: 1.7rem;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.parallax__layer--back {  
  transform: translateZ(-5px) scale(1.5);
  z-index: 3;
}

.parallax__layer--base {
  transform: translateZ(0);
  z-index: 4;
}

.parallax__group:nth-of-type(1) {
  z-index: 2;
}

#group1 .parallax__layer {
  background: #36ffbf;
}

#group2 .parallax__layer--back {
  background: #00f1a4;
}

<div class="parallax">
    <div id="group1" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
    <div id="group2" class="parallax__group">
      <div class="parallax__layer parallax__layer--back">
        <div class="title">Background Layer</div>
      </div>
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
</div>

Answer 1

我删除了 perspective 属性并添加了一些填充。希望这对您有所帮助！

body {
  margin: 0;
}

.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.parallax__group {
  height: 100vh;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.title {
  font-size: 1.7rem;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.parallax__layer--back {  
  transform: translateZ(-5px) scale(1.5);
  z-index: 3;
  padding-top: 50px;
}

.parallax__layer--base {
  transform: translateZ(0px);
  z-index: 4;
}

.parallax__group:nth-of-type(1) {
  z-index: 2;
}

#group1 .parallax__layer {
  background: #36ffbf;
}

#group2 .parallax__layer--back {
  background: #00f1a4;
}

<div class="parallax">
    <div id="group1" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
    <div id="group2" class="parallax__group">
      <div class="parallax__layer parallax__layer--back">
        <div class="title">Background Layer</div>
      </div>
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
</div>

Answer 2

将 overflow: hidden; 添加到 .parallax__group，您的空格就消失了。

body {
  margin: 0;
}

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

.parallax__group {
  height: 100vh;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
  overflow: hidden;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.title {
  font-size: 1.7rem;
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.parallax__layer--back {  
  transform: translateZ(-5px) scale(1.5);
  z-index: 3;
}

.parallax__layer--base {
  transform: translateZ(0);
  z-index: 4;
}

.parallax__group:nth-of-type(1) {
  z-index: 2;
}

#group1 .parallax__layer {
  background: #36ffbf;
}

#group2 .parallax__layer--back {
  background: #00f1a4;
}

<div class="parallax">
    <div id="group1" class="parallax__group">
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
    <div id="group2" class="parallax__group">
      <div class="parallax__layer parallax__layer--back">
        <div class="title">Background Layer</div>
      </div>
      <div class="parallax__layer parallax__layer--base">
        <div class="title">Base Layer</div>
      </div>
    </div>
</div>

TranslateZ 在 html 容器元素的底部添加额外的白色 space

TranslateZ adding extra white space at the bottom of html container element

html

css

parallax