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

Question

我有一个给定尺寸的元素(比方说,100x300像素)生活在一个相同高度和可变宽度的容器中,我想要在拾取容器时使用rotateX周围的变换,这样看起来图像的底线保持在它只是扩展来填充整个容器.-webkit-transform-origin: top center;-webkit-perspective

哇,这听起来令人困惑.这是一张图片:

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

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

Answer 1

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

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

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

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

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

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