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

Question

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

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

所以基本上，我想创建一个具有固定上部宽度和可变下部宽度的梯形。 然而，我无法弄清楚关系背后的数学... 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中。 然后你可以在它们之间进行线性插值。 这不太准确，但可能足够接近。

它也不那么有趣！