как вычислить перспективу css для работы по размерам экрана?

Question

Я не могу получить свойство перспективы css, чтобы вести себя одинаково по разным размерам экрана, так как я не могу понять, на чем основано значение, данное ему?

Например, если у меня есть эффект сбрасывания на мобильном телефоне, и я даю перспективу: 1000 пикселей и хорошо выглядит , но когда я даю такое же значение на рабочем столе, как эффект выглядит немного по-другому, и я просто «угадываю» правильное значение в зависимости от размера экрана.

здесь simple jsfiddle example

<div class=container> 
<div class='e'> 

</div> 
</div> 

CSS:

.container{ 
    perspective:1000px; 
    width:100vw; 
    height:100vh; 
} 
.e { 
    height: 80%; 
    width: 80%; 
    background-color: red; 
    transform-style: preserve-3d; 
    transition-duration: 1s; 
    transform-origin: 100%; 
} 
.e:hover { 
    transform: rotateY(180deg) translateZ(0); 
} 

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

Answer 1

.container{ 
    perspective:100vw; 
    width:100vw; 
    height:100vh; 
} 
set perspective to 100vw to always have perspective = to your screens width. 

Кредит на имя @vals в комментариях выше