CSS3 -webkit-transform:translateZ(xpx)不起作用

Question

对不起,如果这看起来很基本,但我在网上搜索,找不到另一个答案(这让我觉得我做的事情很愚蠢).

我有一个父母和一个孩子div.我正在尝试将CS​​S3 translateZ应用于孩子,但似乎没有发生任何事情.

translateX和translateY工作,以及旋转,但不是translateZ.我疯了吗？

这是一个小提琴: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