translateZ 无法在 Firefox 上运行

【问题标题】：translateZ not working on FirefoxtranslateZ 无法在 Firefox 上运行
【发布时间】：2018-03-19 09:50:50
【问题描述】：

我一直在尝试使用 translateZ 将子元素“列表”隐藏在父元素“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 前面 - 这是意料之外的。

【问题讨论】：

嗨，你能把图像的好坏显示出来吗？
Firefox 和 Chrome 都不需要前缀，而且 Chrome 多年来一直不是“webkit”。此外，您需要在此处发布您的标记，而不是明天会改变或消失的 jsfiddle：minimal reproducible example

【解决方案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;
}

【讨论】：