how to calculate css perspective to work across screen sizes?

Question

I cant get the css perspective property to behave the same across different screen sizes, as I cant understand to what to base the value given to it?

For example if I have some flipping effect on mobile and I give perspective:1000px and its looking good but when i give the same value on desktop than the effect look different a bit and I just "guessing" the right value depending on screen size.

here is 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);
}

is there any formula to get the right perspective value to look the same in all screen sizes?(it does not accept percentage only pixels)

Answer 1

With CSS Container Queries finally being supported in all relevant browsers, the CSS perspective property value can be made relative to its parent element (without using the unsupported %).

html, body {
  height: 100%;
}

.wrapper-outer {
  container-type: size;

  width: 50%;
  height: 50%;
}

.wrapper {
  perspective: 80cqw; /* relative to parent element width */

  width: 100%;
  height: 100%;
}

.child {
  transform: rotateX(20deg);

  width: 20%;
  height: 40%;
  background: grey;
}

<div class="wrapper-outer">
  <div class="wrapper">
    <div class="child">

    </div>
  </div>
</div>

Answer 2

Using calc() is also an option.

In a project, I wanted to tweak the perspective. After identifying what looked good on the smallest mobile resolution and what looked good on the largest mobile resolution, I used calc to create a simple scale that grows with the viewport:

perspective: calc( 720px + ( 100vw - 320px ) * 7 );