CSSアニメーションを使用して、2つの矩形のdivタグを画面全体に移動しています。それぞれはポールのようなものです（幅が広いよりも背が高い）。アニメーションは各divを回転させて角度をつけてから上を向くように戻します。 1つのアニメーションはユーザーによってトリガーされ、もう1つのアニメーションは常に他のdivに向かって動きます。2つのアニメーションディビジョンによる衝突の検出
私はgetBoundingClientRect（）を使用して、あるdivの角がdivに向かって移動していることを検出しようとしました。また、jQueryを使って.position（）を取得しましたが、左に戻ります。
divをmargin-leftプロパティを使用して移動します。
私は調べるべき方法はありますか、それとも誰かが同様の問題を解決する方法はありますか？
おかげで、 DH
あなたはそれらを移動するためにtransform: translateを使用する必要があります。
また、javascriptで要素を移動しているので、状態をメモリに保存しておき、衝突検出をすべてjavascriptで行う必要があります。
これにはDOM APIを使用する必要はありません。
ありがとうございます、それは恥ですが、このためのAPIはありません。私は、JavaScriptで衝突の検出を行います。 – DaZa
重複するオブジェクトを検出できる方法はありません。シーンの幾何学的モデルを使用して、三つのボックスの交差点がいつあるかを見るために三角法を自分で行うことをお勧めします。 JSを使用してオブジェクトを明示的にアニメートすることも簡単です。これは、ブラウザのCSSアニメーションやトランジションと同期が外れることを心配する必要がないためです。
あなたは基本的にline-line intersectionを探しています。
ありがとうございます。私はJSでそれらを動かし、回転のためにCSSを使用しています。私は角度と長さを使ってトリグのアイデアを行い、両方のヒントを試すことができたと思う。再度、感謝します！ – DaZa
不可能。 'Element.getBoundingClientRect（）。left'は要素leftの値を返します。また、要素を移動するために余白を使用しません。 –
さて、私はstyle.leftを使って移動させています。ありがとうございました。 – DaZa