如何计算CSS透视以适用于不同屏幕尺寸？

Question

我无法使不同屏幕尺寸下的CSS perspective属性产生相同的行为，因为我不知道该基于什么给它赋值？

例如，在移动设备上有一些翻转效果，我给它perspective:1000px ，看起来很好。但是在桌面设备上使用相同的值时，则效果略有不同，我只能“猜测”根据屏幕大小来调整正确的值。

这里是一个简单的jsfiddle示例。

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

有没有任何公式可以获得正确的透视值，以便在所有屏幕尺寸下看起来相同？（它不接受百分比，只接受像素）

- Amir Bar

---

你尝试过使用vw、vh、vmin或vmax单位来进行透视吗？ - web-tiki

我觉得它们看起来一样。你可以发一张图片展示它们的区别吗？ - Alvaro

正如@web-tiki所说，在您的情况下，perspective: 1000vw;应该可以实现您所要求的效果。 - vals

@vals 谢谢，你说得对，我完全忘了它。 - Amir Bar

也许这篇文章可以帮到您：https://dev59.com/4VzUa4cB1Zd3GeqP8PQ7 - David Tabernero M.

Answer 1

随着CSS容器查询在所有相关浏览器中终于得到支持，CSS perspective属性的值可以相对于其父元素进行设置（而无需使用不受支持的%）。

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>

- strarsis

Answer 2

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

感谢上面评论中的@vals

- Drew Major

Answer 3

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

在一个项目中，我想调整透视效果。在确定了在最小的移动端分辨率上看起来不错和在最大的移动端分辨率上看起来不错之后，我使用calc创建了一个随着视口增长的简单比例尺：

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

- Fabien Snauwaert

---

320和720是什么意思？我猜320像素是为了最大的设备屏幕，因为它看起来非常突出，而720像素则是为了最小的屏幕？ - bytrangle

那么，calc(700vw - 1520px)？ - Gust van de Wal