CSS3 -webkit转换: translateZ(xpx) not working

Question

抱歉，这似乎很基本，但是我在网上搜索了却找不到其他答案(这使我觉得自己在做一些愚蠢的事情)。

我有一个 parent 和一个 child div。我正在尝试将CS​​S3 translationZ应用于 child ，但是似乎什么也没有发生。

translateX和translateY可以工作，也可以旋转，但translateZ不起作用。我疯了吗？

这是一个 fiddle :http://jsfiddle.net/Sb55D/1/

<div id="main">
    <div id="child">
        Lorem
    </div>
</div>

#main {
   display: block;
   position: absolute;
   width: 400px; height: 400px;
   border: thin solid red;
   top: 10px;
   left: 10px;
   -webkit-transform-style: preserve-3d;
}

#child {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    width: 300px;
    height: 300px;
    border: thin solid green;
    -webkit-transform: translate(-50%, -50%) translateZ(-400px);
    -webkit-transform-style: preserve-3d;
}

Answer 1

您需要将perspective应用于父元素，以使translateZ起作用...尝试添加以下内容:

#main {
   display: block;
   position: absolute;
   width: 400px; height: 400px;
   border: thin solid red;
   top: 10px;
   left: 10px;
   /*-webkit-transform-style: preserve-3d; not needed on parent element */
   -webkit-perspective: 1000;
}

DEMO