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

css, safari, transform, webkit

Solution

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

Problem

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; } ```

Original source