Come ottenere la posizione dello schermo di elementi trasformati CSS3-3d?

Question

Ho un sito molto complicato costruito su CSS3 che ha elementi HTML trasformati, ruotati, capovolti, floppati e solo generalmente distorti.

Sto cercando di capire la posizione sullo schermo di uno di questi elementi e non vedo alcun modo per farlo. Mi stavo chiedendo se qualcuno ha qualche idea geniale.

In alternativa, se qualcuno può spiegare la matematica dietro -webkit-perspective, posso capire la posizione che è l'unica cosa che non sono sicuro di come modello.

Answer 1

Hai provato a utilizzare getBoundingClientRect()?

L'ho usato con successo in passato per calcolare le dimensioni degli elementi che sono stati trasformati con la proprietà transform.

Answer 2

Il problema è che le trasformazioni CSS3 in realtà non cambiano in alcun modo la posizione degli elementi. Ovviamente i browser "sanno" che sono riposizionati, perché li rende, ma questa informazione non viene restituita al DOM/API.

L'unica cosa che posso pensare è calcolare le posizioni in base alle trasformazioni da soli, poiché queste sono "semplici" matrix transformations.

Sfortunatamente la lezione di Algebra è stata da troppo tempo, che non posso dirti più come farlo - solo che è possibile.

Answer 3

L'utilizzo di getBoundingClientRect è una buona idea, ma ti fornirà solo le coordinate del rettangolo che contiene la tua forma, non le coordinate esatte dei 4 angoli in alto, in basso, in basso a sinistra, in alto a destra.

Si sarebbe in grado di farlo solo prendendo ciascuna di quelle coordinate non trasformate e applicando la trasformazione tramite javascript.