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

Transform Style

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

  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:

  transform-style: flat;

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

Source : Webkit example : transform-style