-webkit-transform: translateZ(-100px) rotateY(45deg);
-webkit-transform: translateZ(50px) rotateX(20deg);

Transform Style

This example shows the effect of -webkit-transform-style. The blue box has perspective set on it. The purple box has 

  -webkit-transform-style: preserve-3d;

which allows the yellow and green boxes to live in a shared 3D space, and thus appear to stand away from the purple box by virtue of their transforms.

However, when you hover, we set the purple box to: 

  -webkit-transform-style: flat;

so its children collapse into it. Their -webkit-transform still applies, but now it's just a painting effect, and is not affected by the container's perspective.