Javascript CSS 3D变换以生成给定边长度的梯形

我有一个给定尺寸的元素（比如，100x300 px）生活在一个高度和宽度相同的容器中，我想使用

rotateX

围绕

-webkit变换原点：顶部中心

同时拾取容器的

-webkit透视图

，使图像的底线保持不变，但仅扩展以填充整个容器

哇，听起来很混乱。这是一张照片：

基本上，我想创建一个梯形，上面的宽度固定，下面的宽度可变。然而，我不能完全理解这些关系背后的数学原理。。。欢迎光临。如果主体宽度为600px，则以下示例有效：

---

现在的任务是随着身体宽度不断改变透视和旋转。有什么想法吗？

基本上，您正在尝试找出如何在三维空间中放置对象，使其与二维视口对齐。这总是一件棘手的事情

我不知道数学是什么，大多数其他人可能也不知道。这几乎不是一个常见的问题。但这是我将如何着手解决的问题

这里唯一的变量是

width

。根据宽度需要更改的两个值是容器上的

-webkit perspective

，以及内部元素上的

-webkit transform

。因此，我会手动编辑一些不同宽度的值，并记录必须输入的3D值，以使事情看起来正确。（我会使用web inspector实时编辑这些值，以便您获得即时反馈）

如果你有一些数据点，把它们画在一张图上，然后试着找出它们是如何变化的。我有一种预感，这是一条抛物线，但也可能是双曲线或正弦曲线，我的3D数学不够好，无法确定

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

---

我已经用3种宽度300、450、600完成了：

一些趋势是显而易见的。随着宽度的增加，透视图以越来越大的速度上升，旋转以越来越大的速度下降

准确的公式现在由你决定

---

作为一个更简单的选择，如果计算公式变得太困难，您可以手动整理一些看起来不错的宽度和3D值，并将它们存储在JS中的某个地方。然后你可以在它们之间线性插值。虽然不确切，但可能已经足够近了

---

那也就没那么有趣了

好吧，喝了一杯酒后，我想起了数学：

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

红色元素围绕其上边缘旋转，如果我们将其下边缘投影到容器的下边缘，则投影线和垂直于容器上边缘的线之间的交点就是所需的视点。我们通过简单的三角学得到（注意这里的φ是弧度，而不是度）

如果我们应用此选项，元素的下边缘将始终显示在容器的下边缘上。现在自由参数是旋转。这似乎有关系

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

然而，对于足够大的宽度，我不能完全围绕实际的关系来思考。这是一把小提琴：