rotateX我有一个给定尺寸的元素（例如 100x300 像素），它位于一个高度和可变宽度相同-webkit-transform-origin: top center;的-webkit-perspective容器中它只是扩展以填充整个容器。
哇，这听起来很混乱。这是一张图片：
所以基本上，我想创建一个具有固定上部宽度和可变下部宽度的梯形。但是，我无法弄清楚关系背后的数学原理……欢迎使用 Javascript。如果正文宽度为 600px，则以下示例有效：http: //jsfiddle.net/24qrQ/
现在的任务是随着身体宽度不断地改变视角和旋转。有任何想法吗？
好吧，在喝了一杯酒之后，数学又回到了我的脑海：
首先，让我们看一下透视/旋转比例。从侧面看，它看起来像这样：
红色元素围绕其上边缘旋转，如果我们将其下边缘投影到容器的下边缘，则投影线与其上边缘垂直于容器的线的交点就是所需的视点。我们通过简单的三角函数得到这个（注意这里的 phi 是弧度，而不是度数）。
如果我们应用这个，元素的下边缘将始终出现在容器的下边缘。现在自由参数是旋转。这似乎有关系
rad = pi/2 - element.width / container.width
对于足够大的宽度，但是我不能完全理解实际的关系。这是一个小提琴：http: //jsfiddle.net/24qrQ/6/
基本上，您试图弄清楚如何将对象放置在 3D 空间中，使其与 2D 视口对齐。这总是一件棘手的事情。
我不知道数学是什么，大多数其他人可能也不知道。这几乎不是一个普遍的问题。但这就是我要弄清楚的方法。
这里唯一的变量是width。需要根据宽度更改的 2 个值-webkit-perspective位于容器和-webkit-transform内部元素上。所以我会手动编辑几个不同宽度的值，并记录你必须输入的 3D 值以使事情看起来正确。（我会使用网络检查器实时编辑值，以便您立即获得反馈）
一个你有几个数据点，将它们绘制在图表上，然后尝试弄清楚它们是如何变化的。我有一种预感，它是一条抛物线，但它也可能是双曲线或正弦曲线，我的 3D 数学还不够好，无法确定。
然后你可以试着找出一个方程，当你输入你采样的宽度时，你会得到你之前设置的手动 3D 值。然后用 JS 读取容器的宽度，设置 CSS 值使其看起来正确。
我用 3 个宽度 300、450、600 做到了这一点：
一些趋势是显而易见的。随着宽度的增加，透视以增加的速率上升，而旋转以增加的速率下降。
找出确切的公式，现在由您决定。
作为一种更简单的选择，如果计算公式变得太困难，您可以手动选择一些看起来不错的宽度和 3D 值并将它们存储在 JS 中的某个地方。然后你可以在它们之间进行线性插值。这不会是准确的，但它可能已经足够接近了。
它也将不那么有趣！