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

I was confused about this for a long time although having experimented, I believe it's quite easy to understand:

Assume an element is positioned 100px on the Z axis, making it move toward the viewer, like so:

div {
    transform: translateZ(100px);
}

And you then scale the Z axis by two:

div {
    transform: scaleZ(2) translateZ(100px);
}

Its dimensions aren't affected as you say, but it will now be the same size as if it were translateZ(200px). scaleZ(2) translateZ(400px) is the equivalent of translateZ(800px) and so on.

You can see a demonstration of this on JSFiddle.

Don't think of scaleZ() affecting the element but instead the Z axis which the element is on.

One final note: a browser should treat multiple transform functions as if they are being applied separately, which means their order is important. For scaleZ() to work, it must be placed before translateZ(), else you're just moving the element on the Z axis and then scaling the axis without any visual result.