CSS 3D 变换以给定边长制作梯形

Question

我有一个给定尺寸的元素（比如100x300像素），它位于高度相同但宽度可变的容器中，我想使用rotateX绕-webkit-transform-origin: top center;旋转该元素，并选择容器的-webkit-perspective，使其看起来底部线停留在原位，但仅扩展到填充整个容器。

哇，听起来很复杂。这里有一张图片: 所以基本上，我想创建一个梯形，具有固定的上宽度和可变的下宽度。然而，我无法弄清关系背后的数学... 欢迎使用Javascript。以下示例在body宽度为600px时有效: http://jsfiddle.net/24qrQ/ 现在的任务是随着body的宽度连续改变透视和旋转。有任何想法吗？

- Manuel Ebert

Answer 1

好的，喝完一杯酒之后，数学知识又回到了我脑海中：

首先，让我们来看一下透视/旋转比例。从侧面看，它看起来像这样：

红色元素围绕其上沿旋转，如果我们将其下沿投影到容器的下边缘，投影线与在其上沿垂直于容器的线相交得到所需的视点。我们通过简单的三角函数来得到它（请注意，这里的phi是用弧度表示的，而不是度）。

如果我们应用这个方法，元素的下沿将始终出现在容器的下沿上。现在自由参数是旋转。这似乎有关系。

rad = pi/2 - element.width / container.width

然而，对于足够大的宽度，我仍然无法理解实际的关系。这里有一个示例：http://jsfiddle.net/24qrQ/6/

- Manuel Ebert

Answer 2

基本上，你正在尝试弄清楚如何将一个物体放置在3D空间中，使其与2D视口对齐。这总是一个棘手的问题。

我不知道数学是什么，大多数人也不知道。这几乎不是一个常见的问题。但是，以下是我思考如何解决它的方式。

这里唯一的变量是宽度。根据宽度需要更改的2个值是容器上的-webkit-perspective和内部元素上的-webkit-transform。因此，我会手动编辑几种不同宽度的值，并记录输入哪些3D值才能使事物看起来正确的。 （我会使用Web检查器实时编辑值，以便您获得即时反馈）

一旦您有了一些数据点，请将它们绘制在图表上，然后尝试弄清它们如何变化。 我有一种直觉，它是一个抛物线曲线，但它也可能是双曲线或正弦曲线，我的3D数学不够好，无法确定。

然后，您可以尝试找出一个方程，在其中输入您取样的宽度时，您将获取之前设置的手动3D值。 然后使用JS读取容器的宽度，并设置CSS值使其看起来正确。

---

我已经用3个宽度300、450、600完成了这个过程：

http://jsfiddle.net/24qrQ/3/

一些趋势是显而易见的。随着宽度的增加，透视率以递增的速度上升，并且旋转以递减的速度下降。

现在要找出确切的公式就由您来决定了。

---

作为一个更简单的替代方案，如果找到一个公式变得太困难，您可以手动策划一些看起来不错的宽度和3D值，并将它们存储在JS中的某个位置。 然后，您可以在它们之间进行线性插值。 它可能不是很精确，但足够接近。

这也会更少乐趣！

- Alex Wayne