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(), scaleX() and scaleY() make sense: they stretch the element along the axis specified, multiplying its dimension along that axis by the number you provide.

But scaleZ() seems different:

1. It applies to children of the element
2. It doesn’t affect the dimensions of the child elements, as HTML elements don’t have any dimension along the z-axis (i.e. you can’t make a <div> “thicker”).

The WebKit blog says:

[scaleZ()] affects the scaling along the z axis in transformed children.

I can’t figure out what this actually means in practice. Could anyone supply an explanation, preferably with some example code?

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.

Answer 2

Seems silly to answer a question two years after it was asked, but posting it for posterity.

It has to do with transform matrices and matrix-vector multiplication. Basically, the transform won't appear to work unless the math works out to produce a product where the Z coordinate is greater than zero.

This is easy to explain, but a little bit hard to understand if you don't have the math background. (But a weekend's worth of WikiPedia reading and Google searches will teach you enough. That's how I learned it.) Every transform function, except matrix() and matrix3d() have an equivalent matrix value. For scale3d, the matrix is:

[sx 0 0 0]
[0 sy 0 0]
[0 0 sz 0]
[0 0  0 1] 

Where sx, sy, and sz are the factor for scaling about the x, y, and z axes. For scaleZ, it's the same, but sx and sy are both 1.

When you apply a transform, the browser takes the coordinates for each vertex of the object (in non-nerd speak: takes the coordinates for each box corner) and multiplies it by the transform matrix. The product of this becomes the new coordinates for the object. For example the math of transform: scaleZ(3) on an object starting at (100,50,0) looks a little like this:

[1 0 0 0]   [100]   [100]
[0 1 0 0] * [ 50] = [ 50]
[0 0 3 0]   [  0]   [  0]
[0 0 0 1]   [  1]   [  1]

That product, [100 50 0 1] when translated into a 3D coordinate system becomes what we started with: (100,50,0). The result is that it looks like the transform wasn't applied. In order for a transform using scaleZ() to have an effect, the third number in the product of the matrix and vector must be greater than zero. It usually happens when scaleZ() or scale3d() are applied to the parent element, or used in combination with another transform function. In both cases cumulative/current transform matrix results in a Z coordinate whose value is greater than zero. Here's an example using transform: rotateY(30deg) scaleZ(3). First we need to multiply the matrix for rotateY(30deg) by the matrix for scaleZ(3).

[0.866 0 -0.499 0]   [1 0 0 0]   [0.866 0 -1.497 0]
[0     1  0     0] * [0 1 0 0] = [0     1  0     0]
[0.499 0  0.866 0]   [0 0 3 0]   [0.499 0  2.598 0]
[0     0  0     1]   [0 0 0 1]   [0     0  0     0]

Then we can multiply our matrix product (that bit to the right of the equal sign) by our point at (100,50,0).

[0.866  0 -1.497  0]   [100]   [86.6]
[0      1  0      0] * [ 50] = [50  ]
[0.499  0  2.598  0]   [  0]   [49.9]
[0      0  0      1]   [  1]   [ 1  ]

Our product [86.6 50 49.9 1] works out to coordinates of (87, 50, 50) if we round off to whole numbers. And that second 50 is our Z coordinate. The transform has a noticeable effect.

Answer 3

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.)

Answer 4

there are three views in over webpage X, Y & Z like for example z-index as it's same thing the scaleZ().

Check what w3c say

scale(<number>[, <number>])
specifies a 2D scale operation by the [sx,sy] scaling vector described by the 2 parameters. If the second parameter is not provided, it is takes a value equal to the first.
scale3d(<number>, <number>, <number>)
specifies a 3D scale operation by the [sx,sy,sz] scaling vector described by the 3 parameters.
scaleX(<number>)
specifies a scale operation using the [sx,1,1] scaling vector, where sx is given as the parameter.
scaleY(<number>)
specifies a scale operation using the [1,sy,1] scaling vector, where sy is given as the parameter.
scaleZ(<number>)
specifies a scale operation using the [1,1,sz] scaling vector, where sz is given as the parameter. 

check your link animation http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html

EDIT:

your fiddle still not explain what is scaleZ() because we can get that effect from scaleY() also.

Check this fiddle http://jsfiddle.net/sandeep/dppNn/

Now in my fiddle example you can the 3rd digit box look like 3D means with scaleX(),scaleY() & scaleZ() & 2nd digit box look like 2D because they scale only scaleX() & scaleY().