Я думаю, что преобразование CSS3 translateZ равномерно масштабируется

В некоторых случаях, я думаю, что теги translateZ и scale имеют такой же эффект, как и увеличение или уменьшение.

Я думаю, что между ними есть некоторая подсчетная связь, если я определяю одно значение из них, например translateZ(-1000px) и родительское значение perspective, могу ли я вычислить значение scale, которое имеет тот же эффект, что и значение translateZ?

Ответы

Ответ 1

Вы правы. Когда объект движется к вам (т.е. translateZ), он становится больше (т.е. scale).

Как показано на этой диаграмме, perspective определяет, где средство просмотра относится к контейнеру, а translateZ определяет, где объект относится к контейнеру.

diagram of translateZ

Формула перейти от шкалы к translateZ (и обратно):

scale=perspective/(perspective-translateZ) -OR- enter image description here

Я оставлю математическое доказательство математическому свисту, но я сделал некоторую проверку с помощью пифагорейской теоремы и все получилось.

Пример:

Скажем, вы 100px из контейнера: #container { perspective: 100px; }

  • Если вы translateZ(50px), объект переместится на полпути к вам и будет отображаться в два раза большим, делая его 2x.
  • Если вы translateZ(75px), объект переместился еще на полпути ближе и снова удвоится, сделав его 4 раза.
  • Если вы продолжаете делать это, по мере приближения к translateZ(100px), объект будет приближаться к бесконечно большому.

Попробуйте. Здесь JSFiddle для визуального сравнения различных примеров.

Ограничения:

Это работает, если объект движется прямо к вам, но разваливается, если вы делаете что-то вроде поворота объекта в трехмерном пространстве. Для этого есть математика, но она усложняется. Проверьте 3D-проецирование на википедию.