如何竞争将矩形转换为梯形所需的转换矩阵？

Question

我正在 IE 中使用 css 变换和等效过滤器，并希望通过将 2d 矩形转换为梯形来模拟透视。

具体来说，我希望矩形的右侧保持相同的高度，左侧保持高度的 80%，以便两侧的中点水平彼此对齐。

我熟悉矩阵代数，但不知道如何确定哪个矩阵可以做到这一点。

Answer 1

有关投影，我会使用一个4×4矩阵：

1    0    0    0
0    1    0    0
0    0    0    0
0    0    1/d  1

此工作在齐次坐标（d是从投影平面眼睛的距离，在一个标准的透视设置）。

<强>替代：

要避免与齐次坐标的（或者，如果你不能使用的4x4矩阵，或者如果你不能使用矩阵转换的硬件加速反正）的，就用这个工作：

x' = (d*x)/(z+d)
y' = (d*y)/(z+d)
z' = 0 (it's always projected onto the projection plane)

顺便说一句，这也基本上回答您的问题梯形。只要正确地把你的矩形在三维空间 - 这不是很难搞清楚如何：试想一下，在墙壁上的画矩形你的右手边。然后放下你的眼点要与画的底部水平。现在它将会被投射为您的梯形。的

Answer 2

啊 - 思维多一点，的 2D 矩阵变换只能旋转，倾斜或变换。这意味着，该变换前是平行线平行之后。

在这里我要离开这个问题的情况下，任何人都属于同一思路！

Answer 3

您可以用新的CSS3实现这一目标的Matrix3D变换，这将给你使用上述4x4矩阵的能力。

Answer 4

对此有 2 个答案：

如何像这样倾斜图像

一个用于基于条纹的转换，对于原始问题来说应该足够好（将矩形转换为梯形）：

https://stackoverflow.com/a/10427836/6336464

另一个有点复杂，但允许基于 4x2 矩阵的自定义基于像素的转换（将矩形转换为凸四边形，其中四边形的每个角都可以自定义）：

https://stackoverflow.com/a/372​​36664/6336464