我有以下示例: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;
需要应用于层次结构中所有包含子元素的元素,而不仅仅是root,所以将这个属性添加到 CSS 中可以解决问题:
.motor-dom-node {
position: absolute;
transform-origin: left top 0px;
transform-style: preserve-3d;
}
关于html - 为什么 Z 轴平移(使用 matrix3d 的 CSS 变换)不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33110424/