Question

我不能让css perspective属性在不同的屏幕尺寸上表现相同，因为我无法理解给予它的值的基础是什么？

例如，如果我在移动设备上有一些翻转效果，我会给出一些观点：1000px，看起来不错但是当我在桌面上给出相同的值而不是效果看起来有点不同而我只是根据屏幕尺寸“猜测”正确的值。

<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透视图以跨屏幕尺寸工作？

2 个答案: