What does the scaleZ() CSS transform function do?

Question

I’m trying to wrap my tiny brain around 3D CSS transforms, and I‘m having trouble understanding what the scaleZ() function is for.

scale(),

Answer 1

Apple’s Safari CSS Visual Effects Guide explains scaleZ() like this:

You can modify the coordinate system of an element’s descendants by scaling the z axis, so that distances along the z axis are larger or smaller. This scaling affects only the element’s descendants, and the scaling requires 3D transforms to be enabled, so z-axis scaling requires at least two 3D layers. [Emphasis mine]

So, as I understand it, when:

1. you’ve got two 3D layers, and
2. the inner one has scaleZ() applied to it

then when descendants of the inner layer have 3D transforms applied to them, their movement along the z-axis will be multiplied by the value you passed to scaleZ(). Or something.

I’ve popped up an example on JSFiddle. If you remove -webkit-transform: scaleZ(3);, then the blue box fits inside the grey box, because it doesn’t move so much along the z-axis. (I think.)