html - 为什么 Z 轴平移(使用 matrix3d 的 CSS 变换)不起作用？

Question

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

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

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

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

Answer 1

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

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

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