html - translateZ 不适用于 Firefox

我一直在尝试使用 translateZ 在父元素“div2”后面隐藏子元素“list”。它在 chrome 中非常有效，但在 Firefox 中则不行。一些 body 请帮助。

链接到 JSFiddle 。 translateZ on firefox

.list {
  width: 200px;
  height: 10px;
  background-color: yellow;
  -moz-transform: translateZ(-1em);
  -webkit-transform: translateZ(-1em);
}

请在此处找到图像 Image Link

左侧的图像在 chrome 上正常工作。黄色条在红色 div 后面。右侧的图像来自 firefox，其中黄色条位于红色 div 的前面 - 这是意料之外的。

最佳答案

The transform-style: preserve-3d; isn't inherited ，它必须设置为层次结构中的每个后代，以将它们保持在相同的 3D 空间中。

您在 #div1 和 #div2 中保留了 3D 继承，但在.sub 孙子，因此您希望 Z 移动的 .list 孙子的血统被破坏。

如果将其添加到 .sub CSS 中，它将接受其子 .list 进入 3D 空间并应用 Z 变换。

.sub {
  height: 20px;
  width: 50px;
  background-color: black;
  transform-style: preserve-3d;
}

关于html - translateZ 不适用于 Firefox，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46625224/