Question

我不明白为什么以下示例的3D可视化是错误的。我在Z中翻译10px的背景div和0px的foregound div。结果是div没有按预期显示：第二个背景是第一个背景，任何人都可以解释它？

＆＃13;

.parallax {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;
}

.background {
  height: 100px;
  background-color: #080;
  transform-style: preserve3d;
  transform: translateZ(-10px) rotateY(5deg);
}

.foreground {
  height: 300px;
  transform-style: preserve3d;
  transform: translateZ(0px) rotateY(5deg);
  background-color: #008;
}

＆＃13;

<div class="parallax">
  
  <div class="background"></div>
  <div class="foreground"></div>
  
  <div class="background"></div>
  <div class="foreground"></div>
  
</div>

＆＃13;

Answer 1

在z-index和position: relative;元素中使用.background和.foreground：

＆＃13;

.parallax {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  perspective: 10px;
}

.background {
  position: relative;
  z-index: 0;
  height: 100px;
  background-color: #080;
  transform-style: preserve3d;
  transform: translateZ(-10px) rotateY(5deg);
}

.foreground {
  position: relative;
  z-index: 1;
  height: 300px;
  transform-style: preserve3d;
  transform: translateZ(0px) rotateY(5deg);
  background-color: #008;
}

＆＃13;

<div class="parallax">
  
  <div class="background"></div>
  <div class="foreground"></div>
  
  <div class="background"></div>
  <div class="foreground"></div>
  
</div>

＆＃13;

用CSS3转换3d

1 个答案: