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

Question

口头描述确实是一个相当复杂的问题。看看这个sn-p：

$("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 添加到容器中就可以了。