私はCSS3上に構築された非常に複雑なサイトを持っています.HTML要素には3D変換、回転、反転、浮き、一般的に歪みがあります。CSS3-3d変換要素のスクリーン位置を取得する方法は？
私はこれらの要素の1つの画面上の位置を把握しようとしており、そうする方法はありません。誰かが独創的なアイデアを持っているのだろうかと思っていました。
また、誰でも-webkit-perspectiveの後ろの数学を説明することができれば、それが私がモデル化する方法がわからない唯一のものだから、その位置を把握することができます。
getBoundingClientRect()を試しましたか？
transformプロパティで変換された要素のディメンションを計算するためにこれを成功させました。
問題は、CSS3変換は実際には要素の位置を実際に変更しないということです。もちろん、ブラウザはレンダリングされるので、再配置されたことを「認識」していますが、この情報はDOM/APIには戻されません。
私が考えることができる唯一のことは、これらが "シンプル"なので、変換に基づいて位置を計算することです。matrix transformations。
残念ながら、代数学のクラスはこれまで何度もやっていることがありません。
getBoundingClientRectを使用すると良いですが、爪先、底辺、ボトムレフト、直角コーナーの正確な座標ではなく、形状を含む四角形の座標のみが表示されます。
あなたは、変換されていないそれぞれの座標を取得し、JavaScriptを使用して変換を適用することでこれを行うことができます。
新しい回答を追加するのではなく、受け入れられた回答にコメントとして投稿してください –
ええ、私は問題が何であるかを知っています:)そして私はそれを自分自身で計算することができます。しかし、私が言ったように、 '-webkit-perspective'の背後にある数学は実際には分かりません。焦点距離コントロールのように動作しますが、wtfは '-webkit-perspective：500'を実際に意味しますか？ –
three.jsのCSS3DRendererを見てください。私が覚えていることから、彼らはカメラの視野（fov）をとり、それを幅または高さのいずれかで掛けて視点を得る。だからそれはそれらと関連している。 – Funkodebat