Рассчитать расстояние перехода, чтобы оправдать размер проекции

Question

У меня есть изображение, которое визуально должно стать больше, применяя z translate с некоторой точки зрения. Мне нужно рассчитать расстояние перевода в направлении z dist, что приведет к увеличению размера первоначальной проекции изображения на некоторый коэффициент.

Answer 1

Свойствоспектива устанавливает расстояние от зрителя до сцены; это то же самое, что сказать расстояние от зрителя до исходного (нетрансформированного) элемента.

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

Видимый размер элемента будет пропорционален этому изменению

начальное расстояние = перспектива

конечное расстояние = перспектива - перевод-z

соотношение = начальный / конечный

Если перспектива 1000px, а translateZ - 750px, это приведет к конечному расстоянию 250px и соотношению 4. Изображение получит эффект масштабирования 4x.

Обратное исчисление:

translateZ = перспектива * (1 -фактор)

пример достижения коэффициента 4 с перспективой 1000px и перевода 750px

.base {
  width: 100px;
  height: 100px;
  perspective: 1000px;
  perspective-origin: -3px -2px;
  border: solid 1px red;
}
.transform {
  width: 25px;
  height: 25px;
  border: solid 1px blue;
  transform: translateZ(750px);
  left: 34px;
  top: 34px;
}

<div class="base">
<div class="transform"></div>
</div>