html - translateZ 不适用于 Firefox

Question

我一直在尝试使用 translateZ 将子元素“list”隐藏在父元素“div2”的后面。它在 chrome 中运行得非常好，但在 firefox 上却不行。请一些人帮忙。

链接到 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 的前面 - 这出乎意料。

Answer 1

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