css - CSS3 -webkit-transform: translateZ(xpx) 不工作

Question

对不起，如果这看起来有点基本，但我在网上搜索并找不到另一个答案（这让我觉得我在做一些愚蠢的事情）。

我有一个父母和一个孩子的div。我正在尝试将 CSS3 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;
}

演示