Question

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

具体来说，我希望矩形的右手边保持相同的高度，左手边要说高度的80％，这样两边的中点就会相互水平对齐。

我熟悉矩阵代数，但不知道如何确定矩阵会做什么。

Answer 1

对于投影，我使用4x4矩阵：

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)

BTW，这也基本上回答了你的梯形问题。只需将您的矩形正确放置在3D空间中 - 不难弄清楚如何：想象一下右侧墙上的矩形画。然后降低你的视点，使其与绘画的底部保持水平。现在它将被预测为你的梯形。

Answer 2

啊 - 多思考一下， 2d 矩阵变换只能旋转，倾斜或变换。这意味着在转换之前并行的行之后是平行的。

我会在这里留下这个问题，以防其他人陷入同样的思路！

Answer 3

您可以使用新的CSS3 matrix3d变换来完成此操作，这将使您能够使用上述4x4矩阵。

Answer 4

它有2个答案：

一个用于基于条带的变换，对于原始问题（将矩形变换为梯形）应该足够好了：

另一个稍微复杂但允许基于4x2矩阵的自定义基于像素的变换（变换矩形到凸四边形，四边形的每个角都可以自定义）：