如何计算 css 视角以跨屏幕尺寸工作？

Question

我无法让 css 视角属性在不同的屏幕尺寸下表现相同，因为我无法理解赋予它的价值的基础是什么？

例如，如果我在移动设备上有一些翻转效果并且我给 perspective:1000px 并且它看起来不错但是当我在桌面上给出相同的值时，效果看起来有点不同，我只是 "guessing" 正确的值取决于屏幕尺寸。

<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

Answer 2

使用 calc() 也是一种选择。

在一个项目中，我想调整视角。在确定什么在最小移动分辨率下看起来不错以及什么在最大移动分辨率上看起来不错之后，我使用 calc 创建了一个随视口增长的简单比例：

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

如何计算 css 视角以跨屏幕尺寸工作？

how to calculate css perspective to work across screen sizes?

css

3d

css-transforms