ボックス (青で表される) をオーバーレイするイメージ (緑で表される) があり、イメージtransform: scale()のサイズは ing になります。これが発生すると、画像のすべてのエッジが同時に変換を完了する必要があります。
これを行うにはtransform-origin、JavaScript を使用して、境界ボックスの上に画像が配置されている場所に基づいて を計算する必要があります。getBoundingClientRect()両方の要素に提供されるすべての座標を知っていると仮定します。
以下の 6 つの例では、変換元のパーセンテージが交差する場所に赤い点を配置しました。
そこにたどり着くための数学がわかりません。答えを見つけるのに最も近いのはこの質問ですが、少しあいまいで、答え自体を完全に理解しているかどうかはわかりません。これについてご支援いただければ幸いです。何か不足している場合は、喜んで詳細をお知らせします。
