CSS 3D变换使得给定边长的梯形

Question

我有一个给定尺寸的元素（比方说，100x300像素）生活在一个高度相同且宽度可变的容器中，我希望在rotateX周围-webkit-transform-origin: top center;转换-webkit-perspective同时选择{{1}容器的大小，使图像的底线保持原样，但只展开以填充整个容器。

哇，这听起来令人困惑。这是一张图片：

所以基本上，我想创建一个具有固定上宽度和可变下宽度的梯形。然而，我无法弄清楚关系背后的数学... Javascript欢迎。以下示例适用于身体宽度为600px：http://jsfiddle.net/24qrQ/

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

Answer 1

好的，喝了一杯酒后，数学回到了我的身边：

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

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

如果我们应用它，元素的下边缘将始终出现在容器的下边缘。现在free参数是旋转。这个似乎具有关系

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

对于足够大的宽度，但是我不能完全围绕实际的关系。这是一个小提琴：http://jsfiddle.net/24qrQ/6/

Answer 2

基本上，您正在尝试弄清楚如何将对象放在3D空间中，因此它与2D视口对齐。这总是一件棘手的事情。

我不知道数学是什么，其他大多数也可能都不知道。这不是一个普遍的问题。但这就是我如何去搞清楚。

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

您有一些数据点，将它们绘制在图表上，然后尝试弄清楚它们是如何变化的。我有预感它是一条抛物线曲线，但它可能只是双曲线或正弦曲线，我的3D数学不够好，无法确切知道。

然后你可以尝试找出一个等式，当你输入你采样的宽度时，你会得到你之前设置的手动3D值。然后使用JS读取容器的宽度并设置CSS值以使其看起来正确。

---

我已经完成了3宽度300,450,600：

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

一些趋势是显而易见的。随着宽度的增加，视角在增加的情况下上升，并且旋转以越来越快的速度下降。

找出确切的公式，现在取决于你。

---

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

它也不那么有趣！