为什么 Z 轴平移（使用 matrix3d 进行 CSS 变换）不起作用？答案

【问题标题】：Why does Z-axis translation (CSS transform with matrix3d) not work?为什么 Z 轴平移（使用 matrix3d 进行 CSS 变换）不起作用？
【发布时间】：2016-01-11 15:52:50
【问题描述】：

我有以下例子：http://jsfiddle.net/trusktr/keug4tya/

在第 9 行，您会看到 DIV 元素（输出中的颜色为黄色）的 Z 平移为 200。另一个绿色元素（第 18 行）的 Z 转换为 0，只有黄色容器的 Z 转换为 200。

perspective:1000px 和 transform-style:preserve-3d 应用于根元素 .motor-dom-scene 元素。

为什么黄色元素没有出现在绿色元素前面？

【问题讨论】：

你能把你的标记减少到只有基本的吗？
@kcdwayne 已更新。
现在很少了。在不改变我的用例的情况下，它不能比这更小了。

标签： html css matrix css-transforms

【解决方案1】：

答案是，在具有嵌套元素的场景中，CSS 属性 transform-style: preserve-3d; 需要应用于层次结构下的所有包含子元素的元素，而不仅仅是根，因此将该属性添加到 CSS 可以解决问题：

.motor-dom-node {
  position: absolute;
  transform-origin: left top 0px;
  transform-style: preserve-3d;
}

这是工作示例：http://jsfiddle.net/trusktr/keug4tya/9/

【讨论】：

这应该是“正确答案”，记录在案。 IE。你应该把它标记为正确，即使这是你自己的答案:)
@dudewad 谢谢！我忘记了，因为 SO 让你在接受自己的答案之前等待，所以我离开了，忘了回来。