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

Ответ 1

Кажется глупым ответить на вопрос через два года после его запроса, но опубликовать его для потомков.

Это связано с преобразованиями матриц и умножением матричных векторов. В принципе, преобразование не будет работать, если математика не выработает продукт, где координата Z больше нуля.

Это легко объяснить, но немного сложно понять, если у вас нет математического фона. (Но ценность в Википедии в выходные и поисковые запросы Google научит вас достаточно. Это то, как я ее узнал.) Каждая функция преобразования, за исключением matrix() и matrix3d ​​(), имеет эквивалентное значение матрицы. Для scale3d матрица:

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

Где sx, sy и sz - коэффициент масштабирования относительно осей x, y и z. Для scaleZ это то же самое, но sx и sy равны 1.

При применении преобразования браузер берет координаты для каждой вершины объекта (в не-nerd говорят: берет координаты для каждого угла окна) и умножает его на матрицу преобразования. Произведением этого становится новые координаты для объекта. Например, математика transform: scaleZ(3) для объекта, начинающегося с (100,50,0), выглядит примерно так:

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

Этот продукт, [100 50 0 1] при переводе в трехмерную систему координат становится тем, с чего мы начали: (100,50,0). В результате получается, что преобразование не применялось. Для того чтобы преобразование с использованием scaleZ() получило эффект, третье число в произведении матрицы и вектора должно быть больше нуля. Обычно это происходит, когда scaleZ() или scale3d() применяются к родительскому элементу или используются в сочетании с другой функцией преобразования. В обоих случаях суммарная/текущая матрица преобразования приводит к координате Z, значение которой больше нуля. Вот пример с использованием transform: rotateY(30deg) scaleZ(3). Сначала нам нужно умножить матрицу на rotateY(30deg) на матрицу для 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]

Тогда мы можем умножить наше матричное произведение (это бит справа от знака равенства) нашей точкой в ​​точке (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  ]

Наш продукт [86,6 50 49,9 1] работает в координатах (87, 50, 50), если мы округлим до целых чисел. И эта вторая 50 - наша координата Z. Преобразование имеет заметный эффект.

Ответ 2

на веб-странице X, Y & Z есть three views, как например z-index, так как это то же самое scaleZ().

Проверьте, что 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. 

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

EDIT:

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

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

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

Ответ 3

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

Предположим, что элемент позиционируется 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 и затем масштабируете ось без какого-либо визуального результата.

Ответ 4

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

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

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

• У вас есть два 3D-слоя, а
• внутренний имеет scaleZ(), примененный к нему

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

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