Почему пропадает элемент при изменении значения translateZ?

Вот пример с transform: perspective(1000px) translateZ(-100px);

.block {
  margin: 50px;
  display: inline-block;
  width: 500px;
  height: 500px;
  background: pink;
  transform: perspective(1000px) translateZ(-100px);
  outline: 1px solid black;
}
<div class="block"></div>

Вот пример с transform: perspective(1000px) translateZ(1000px);

.block {
  margin: 50px;
  display: inline-block;
  width: 500px;
  height: 500px;
  background: pink;
  transform: perspective(1000px) translateZ(1000px);
  outline: 1px solid black;
}
<div class="block"></div>

Скорее всего я просто не до конца понимаю как взаимодействуют между собой perspective и translateZ.

Получается, что perspective "включает" в работу ось z. У самой же перспективы есть ось z (ее значение высчитывается с помощью формулы из самого значения perspective). И выходит, что если у translateZ будет то значение, которое будет выходить за рамки значения оси зет у перспективы, то элемент не будет отображаться?

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


Ответы (0 шт):