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

Question

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

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

.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);
}

<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>

在我的 mac 上同时使用 Firefox 和 Chrome，在单击“将 1 移到前面”按钮后，div1 仍然被 div2 覆盖，即使它更出屏幕(translateZ 值更高)。我的期望是，一旦 div1 在 z 轴上超过 div2，它就应该覆盖 div2，因为这样更有意义。 (我知道的有点抽象)

Safari 没有这个问题 - 所以如果您碰巧能够在 Safari 上运行它，您就会明白我要描述的内容。我并不是说 Safari 的实现更出色，但事实上这正是我正在寻找的行为。有什么办法可以在Chrome和Firefox上达到同样的效果吗？

Answer 1

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