如果没有Preserve-3d，则不会渲染TranslateZ（）

Question

根据这个http://jsfiddle.net/4ESUW/3/示例，我试图通过translateZ()调整Z轴位置，但它表现得如此奇怪。

我不想使用preserve-3d，因为它会影响div位置，这是我进行进一步互动所需要的。

任何人都有想法或线索如何在没有translateZ()的情况下使用preserve-3d

我在Chrome版本19.0.1084.56上运行此示例。不幸的是，它似乎也不适用于Firefox。

Answer 1

在我看来，你在自己的陈述中自相矛盾：你想使用翻译但不想影响div的位置???

尽管如此，没有preserve-3d它也无法工作，因为transform-style属性的定义是子元素是否存在于他们自己的3d空间（preserve-3d）或被展平并限制在父元素（transform-style:flat）的平面上，这是默认（不可继承）的值。

因此，如果您想使用涉及z轴的任何变换（例如translateZ和rotateX / Y），您始终必须设置transform-style:preserve-3d。否则它们将绑定到其父元素的z平面。

有关详细信息，请查看MDN article。