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

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

如果你post，这是

105 px * cos (40deg) = 80 px

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

105 px * tan (40deg) = 88 px

透视点（星星）需要与下边、右边和左边成轴。（绿线）。这样，您从指定的点（星星）看，您看到右侧完全在您的方向（您在绿线方向看） - 所以这一侧是 "collapsed"。左边也一样。

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

进一步说明（点击放大）

美丽code 使用此视角 post由 vinayakj 编辑

Perspective、translateZ、rotate3d 和 no 之间的关系是什么？面孔

What is the relation between Perspective, translateZ, rotate3d, and no. of faces

javascript

css

math

jquery

css-transforms