javascript - 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;

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

Answer 1

你的视角点需要在左右两侧的交点上

对于您发布的案例，这是

105 px * cos (40deg) = 80 px

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

105 px * tan (40deg) = 88 px

透视点(星形)需要与相邻边、右侧和左侧成轴。 (绿线)。这样，您从指定的点(星星)看，您看到的右侧完全在您的方向(您在绿线方向看)——所以这一侧是“折叠的”。左侧也一样。

所以预期值是绿色箭头的尺寸:

进一步说明(点击放大)

美丽code使用 vinayakj 发布的这个观点