为什么Z轴平移（用matrix3d进行CSS转换）不起作用？

Question

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

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

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

为什么黄色元素不会出现在绿色元素的前面？

Answer 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/