Почему пропадает элемент при изменении значения 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 будет то значение, которое будет выходить за рамки значения оси зет у перспективы, то элемент не будет отображаться?
Наверное тут была бы очень полезна конкретная формула для расчета параметров изображения в перспективе, но не знаю, не могу найти