为什么 Z 轴平移（CSS transform with matrix3d）不起作用？

Why does Z-axis translation (CSS transform with matrix3d) not work?

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

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

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

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

答案是，在具有嵌套元素的场景中，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/