どのような競い合い、変換マトリクスを変換する矩形に台?

Question

私は遊びcssに変換および同等のフィルタの家で、をシミュレートしたい視点を変え、2次元矩形に台.

具体的には、右側の矩形のバーニーズニューヨークに、同じ高さ、左手側にすると言う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)

ところで、これは基本的にあなたの台形の質問にも答えます。長方形を3Dスペースに正しく置くだけです - 右側の壁に長方形の絵を想像するのは難しくありません。次に、絵画の底で目のポイントを下げて水平になります。今、それはあなたの台形として投影されます。

Answer 2

ああ - もう少し考えて、 2d マトリックス変換は、回転、歪む、または変換することのみができます。つまり、変換の前に平行になる線はその後平行になります。

他の誰かが同じ考え方に陥った場合に備えて、この質問をここに残します！

Answer 3

これは、新しいCSS3 Matrix3D変換で達成できます。これにより、上記4x4マトリックスを使用できるようになります。

Answer 4

あり2回答す:

どのようにスキュー画像にこのような

一つのストライプに基づく転換すべきもの（変換矩形台形):

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

にはもう少し複雑できるようにカスタムピクセル-ベー変換に基づく4x2列に変える矩形凸quadrilateralがそれぞれのquadrilateralできるダイアログボックスが表示され):

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