translateZ 不适用于 Firefox

Question

我一直在尝试使用 translateZ 在父元素“div2”后面隐藏子元素“list”。它在 chrome 上工作得非常好，但在 Firefox 上却没有。一些身体请帮助。

链接到 JSFiddle 。 Firefox 上的 translateZ

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

请在此处找到图片图片链接

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

Answer 1

在transform-style: preserve-3d;不被继承，它被设置为层次结构中的每一个后代，让他们在同一个三维空间。

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

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

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