基本的に 2D マップである画像要素があり、それに (jQuery を使用して) 次の CSS 変換を適用したとします。
$('#img').parent().css("perspective","696px");
$('#img').css("transform","rotateX(59deg) rotateY(2deg) rotateZ(-41deg)");
この変換を適用して、2D 画像に「偽の遠近法」効果を適用しました。これで、この画像に X、Y 位置を指す一連の座標がマップされました。
私が知りたかったのは、この変換が与えられた各ポイントの「新しい」X、Y位置を計算するためのテクニックまたは方法があるかどうかです
明確にするために、私はコンピューターグラフィックス理論の知識がありません。私はこの概念実証を開発しようとしていて、HTML画像にこの遠近効果を与え、同時に画像をインタラクティブに保ち、ユーザーはその画像にマッピングされた各ポイントをクリックします
更新 1
変換後に長方形の座標を返す「getBoundingClientRect」というメソッドを見つけました ( https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect ) 。この新しい四角形を使用して元の点が与えられた場合の行列変換は正しいですか? 申し訳ありませんが、私はコンピュータ グラフィックスの理論を本当に理解していないので、この方法を試して動作することを確認したかっただけです。