Javascript 透视、平移、旋转3D和面数之间的关系是什么

我指的是3d变换的应用程序

因此，我尝试动态设置

.container

的透视属性，使相邻面与前面垂直，如下图中的绿色线条所示

相关代码

.container {
  width: 210px;
  height: 140px;
  position: relative;
  perspective: 1000px;
}

#carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: translateZ( -288px ) rotateY( -160deg );
}

#carousel figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 186px;
  height: 116px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
}

我尝试了不同类型的组合，但它部分是正确的，因为它要么使用小的无面，要么使用大的无面。 我只知道透视值与面数成反比

perspectiveValue = translateZValue/noOfFaces;
perspectiveValue = translateZValue*rotationAngle/noOfFaces;

---

如果有人知道透视、平移、旋转3D和面数之间的关系，请告诉我。谢谢。

您的透视点需要位于左右两侧的交点处

对于您发布的案例，这是

105 px * cos (40deg) = 80 px

对不起，我犯了一个愚蠢的错误，是棕褐色的。正确的公式是

105 px * tan (40deg) = 88 px

透视点（星体）需要与下一侧、右侧和左侧成轴向。（绿线）。 这样，你从指示的点（星星）看，你可以看到右边完全在你的方向上（你看的是绿线方向），所以这一边是“折叠的”。左边也一样

因此pespective值是绿色箭头的尺寸：

进一步说明（单击以缩放）

---

使用vinayakj发布的这个透视图真是太棒了

有人知道我如何向任何特定的用户寻求帮助吗？因为我可以看到开发上述帖子的开发人员，我如何与他沟通或将他链接到这个帖子@desandro你能帮个忙吗？你能为此创建一个JSFIDLE吗？“因为我没有遇到问题。”维纳亚吉似乎有一个问题。在这一页的底部有一个“认识能回答问题的人吗？”的部分。@kaido真的很感谢。。在他的网站上，他提到无法获得个人支持，因此我不确定是否可以通过其他媒介与他联系，因为他可能不喜欢这样。@MaciejKwas，我希望面2和9与面1垂直，因此如果您将

.container

的透视设置为

透视：90px，它看起来是垂直的，但是如果没有面变化，这个值需要重新计算，我正在搜索这样的公式。尝试了
（宽度/2）*Math.cos（2*Math.PI/faces）
，没有给出正确的结果，是否缺少任何内容？对于9个面，
105 px*cos（40度）=80 px
正确，但对于20张脸，应用相同的公式得出的结果是
105 px*cos（18deg）=99 px
预期值是
34px
你很棒。。谢谢工作得很有魅力。。明天有资格获得赏金。。我用
（translateZ/faces/2/2*Math.PI）*（angle/faces/2/2*Math.PI）+（translateZ/（angle）/Math.PI）
，有点像正弦波。所以绿线交点是透视点或什么的，你能补充一些解释吗，有点困惑。哎呀！我想补充一个理由，补充一个答案。。我已经在答案中添加了你的链接，我喜欢它。（但如果你不喜欢，我会删除）