如何计算css透视图以跨屏幕大小工作?

如何计算css透视图以跨屏幕大小工作?,css,3d,css-transforms,Css,3d,Css Transforms,我无法使css透视属性在不同的屏幕大小上表现相同,因为我无法理解给定给它的值的基础是什么 例如,如果我在手机上有一些翻转效果,我给出了透视图:1000px,它看起来不错 但当我在桌面上给出相同的值时,效果看起来有点不同,我只是根据屏幕大小“猜测”正确的值 这是 是否有任何公式可以使正确的透视值在所有屏幕尺寸下看起来都一样?(它不接受仅百分比像素) 上述评论中的@VAL也可以使用 在一个项目中,我想调整透视图。在确定了最小移动分辨率和最大移动分辨率下的效果之后,我使用calc创建了一个随视口增长的

我无法使css透视属性在不同的屏幕大小上表现相同,因为我无法理解给定给它的值的基础是什么

例如,如果我在手机上有一些翻转效果,我给出了透视图:1000px,它看起来不错 但当我在桌面上给出相同的值时,效果看起来有点不同,我只是根据屏幕大小“猜测”正确的值

这是

是否有任何公式可以使正确的透视值在所有屏幕尺寸下看起来都一样?(它不接受仅百分比像素)

上述评论中的@VAL也可以使用

在一个项目中,我想调整透视图。在确定了最小移动分辨率和最大移动分辨率下的效果之后,我使用
calc
创建了一个随视口增长的简单比例:

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

你有没有试过用大众、vh、vmin或vmax的单位来透视?我看是一样的。你能发布一张图片来说明区别吗?正如@web tiki所说,在你的案例透视图中:1000vw;你要什么就给什么for@vals谢谢,你是对的,完全错过了。也许这篇文章可以帮助你:320和720是什么意思?我猜320px代表最大的设备屏幕,因为它看起来非常突出,而720px代表最小的屏幕?那么,
calc(700vw-1520px)
.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);
}
.container{
  perspective:100vw;
  width:100vw;
  height:100vh;
}
set perspective to 100vw to always have perspective = to your screens width.
perspective: calc( 720px + ( 100vw - 320px ) * 7 );