translateZ 不适用于 Firefox

Question

我一直在尝试使用 translateZ 将子元素 "list" 隐藏在父元素 "div2" 后面。它在 chrome 中非常有效，但在 Firefox 中却不行。请一些人帮忙。

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

请在此处查找图片Image Link

左侧的图像在 chrome 上正常工作。黄色条在红色后面 div。右边的图片来自 firefox，其中黄色条在红色前面 div - 这出乎意料。

Answer 1

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

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

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

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

translateZ not working on Firefox