CSS3 -webkit-transform: translateZ(xpx) not working

Question

Sorry if this seems kind of basic, but I searched around the web and couldn't find another answer (which makes me think I'm doing something stupid).

I have a parent and a child div. I'm trying to apply a CSS3 translateZ to the child, but nothing seems to be happening.

translateX and translateY work, as well as rotate, but not translateZ. Am I crazy?

Here's a 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

You need to apply perspective to the parent element in order for translateZ to work... Try adding something like:

#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