Что делает функция преобразования CSS scaleZ ()?

Есть three views в over webpage X, Y & Z, как например z-index, поскольку это то же самое, что scaleZ().

Проверьте, что w3c говорит

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. 

Проверьте анимацию ссылки http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html

Редактировать:

Ваша Скрипка все еще не объясняет, что такое scaleZ(), потому что мы можем получить этот эффект и от scaleY().

Проверьте эту скрипку http://jsfiddle.net/sandeep/dppNn/

Теперь в моем примере скрипки вы можете 3rd digit box выглядеть как 3D means с scaleX(),scaleY() & scaleZ() & 2nd digit box выглядят как 2D, потому что масштабируются только scaleX () и scaleY ().

Я долго был в замешательстве по этому поводу, хотя, экспериментируя, я думаю, что это довольно легко понять:

Предположим, что элемент расположен на 100px по оси Z, что заставляет его двигаться к зрителю, например:

div {
    transform: translateZ(100px);
}

И затем вы масштабируете ось Z на два:

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

На его размеры это не повлияет, как вы говорите, но теперь он будет такого же размера, как если бы он был translateZ(200px). scaleZ(2) translateZ(400px) является эквивалентом translateZ(800px) и так далее.

Вы можете увидеть демонстрацию этого на JSFiddle .

Не думайте о том, что scaleZ() влияет на элемент, а вместо этого на ось Z, на которой находится элемент.

Последнее замечание: браузер должен рассматривать несколько функций преобразования, как если бы они применялись отдельно, что означает, что их порядок важен. Чтобы scaleZ() работал, он должен быть помещен перед translateZ(), иначе вы просто перемещаете элемент по оси Z, а затем масштабируете ось без какого-либо визуального результата.

Руководство по визуальным эффектам Safari CSS от Apple объясняет scaleZ() примерно так:

Вы можете изменить систему координат потомков элемента, масштабируя ось z так, чтобы расстояния вдоль оси z были больше или меньше. Это масштабирование влияет только на потомков элемента, имасштабирование требует включения 3D-преобразований, поэтому масштабирование по оси z требует по крайней мере двух 3D-слоев . [Курсив мой]

Итак, как я понимаю, когда:

1. у вас есть два 3D слоя, и
2. внутренний имеет scaleZ() приложенный к нему

Затем, когда к потомкам внутреннего слоя будут применены 3D-преобразования, их движение вдоль оси z будет умножено на значение, которое вы передали scaleZ(). Или еще что-нибудь.

Я нашел пример на JSFiddle. Если вы удалите -webkit-transform: scaleZ(3);, то синяя коробка поместится внутри серой коробки, потому что она не так сильно перемещается вдоль оси Z. (Я думаю.)