Perspective，translateZ，rotate3d和no之间的关系是什么。面孔

Question

我指的是this post进行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;

如果有人知道perspective，translateZ，rotate3d和no之间的关系，请告诉我。面孔感谢。

Answer 1

您的视角需要位于右侧和左侧双方的交叉点

对于您发布的案例，这是

105 px * cos (40deg) = 80 px

抱歉 - 我犯了一个愚蠢的错误，它是棕褐色的。正确的公式是

105 px * tan (40deg) = 88 px

透视点（星形）需要轴向于下一侧，右侧和左侧。 （绿线）。 这样，你从指示的点（星星）看，你看到右侧完全朝向你的方向（你正在看绿线方向） - 所以这边是“折叠”。左侧也一样。

所以pespective值是绿色箭头的尺寸：

进一步说明（点击放大）

美丽code使用vinayakj发布的这个视角