【发布时间】：2010-03-20 17:47:26
【问题描述】：
我正在使用 IE 中的 css 变换和等效过滤器，并希望通过将 2d 矩形变换为梯形来模拟透视。
具体来说，我希望矩形的右手边保持相同的高度，而左手边是高度的 80%，这样两边的中点就在水平线上。
我熟悉矩阵代数，但想不出如何确定什么矩阵可以做到这一点。
【问题讨论】：
标签： matrix perspective
【发布时间】：2010-03-20 17:47:26
【问题描述】：
对于投影，我会使用 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)
顺便说一句，这也基本上回答了你的梯形问题。只需将您的矩形正确放置在 3D 空间中 - 不难弄清楚如何：想象一下您右手边墙上的矩形画。然后降低你的眼点，使其与画的底部齐平。现在它将被投影为您的梯形。
【讨论】：
-
感谢您的回答 - 不幸的是，css 转换规范只允许二维矩阵。
-
好的，但是你不能使用公式
x' = (d*x)/(z+d)，...？这个计算真的很快（当然，不像在硬件中那样快:-)！
啊 - 再想一想，2d 矩阵变换只能旋转、倾斜或变换。这意味着在转换之前平行的线在转换之后是平行的。
我会把这个问题留在这里，以防其他人也有同样的想法！
【讨论】：
您可以使用新的 CSS3 matrix3d 变换来完成此操作，这将使您能够使用上述 4x4 矩阵。
【讨论】：
有2个答案：
一个用于基于条纹的转换，对于原始问题应该足够好（将矩形转换为梯形）：
https://stackoverflow.com/a/10427836/6336464
另一个稍微复杂一些，但允许基于 4x2 矩阵的自定义基于像素的转换（将矩形转换为凸四边形，其中四边形的每个角都可以自定义）：
【讨论】：