css - CSS3 -webkit-transform: translateZ(xpx) が機能しない

Question

これが基本的なことのように思われる場合は申し訳ありませんが、Web を検索したところ、別の答えが見つかりませんでした (これは、私が愚かなことをしていると思います)。

親と子の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;
}