Question

口头描述确实是一个相当复杂的问题。看一下这个片段：

＆＃13;

$("button").on("click",() => {
	$("#div1").css("transform","translateZ(50px)");
})

＆＃13;

.testdiv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  transition: transform 1s;
  backface-visibility: hidden;
}

#container {
  position: absolute;
  top: 100px;
  left: 100px;
  perspective: 500px;
}

#div1 {
  background-color: #f00;
  margin-left: 50px;
  transform: translateZ(10px);
}

#div2 {
  background-color: #0f0;
  transform: translateZ(30px);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="div1" class="testdiv">
    1
  </div>
  <div id="div2" class="testdiv">
    2
  </div>
</div>
<button>Move 1 to front
</button>

＆＃13;

在我的Mac上使用Firefox和Chrome，点击＆＃34;将1移到前面＆＃34;按钮，div1仍然被div2覆盖，即使它超出屏幕（translateZ值更高）。我的期望是div1一旦超过z轴上的div2就应该覆盖div2，因为这更有意义。（我知道这有点抽象）

Safari没有这个问题 - 所以如果你碰巧能够在Safari上运行它，你就会看到我想要描述的内容。我并不是说Safari的实施是优越的，但事实上这就是我正在寻找的行为。有没有办法在Chrome和Firefox上实现相同的效果？

Answer 1

事实证明，将transform-style: preserve-3d添加到容器中可以完成工作。

3D css变换div覆盖忽略z坐标问题

1 个答案: