Comment obtenir la position d'écran des éléments transformés en CSS3-3d ?

Question

J'ai un site très compliqué construit sur CSS3 qui a des éléments html transformés en 3D, tournés, retournés, inversés et généralement déformés.

J'essaie de déterminer l'emplacement à l'écran de l'un de ces éléments et je ne vois aucun moyen de le faire. Je me demandais si quelqu'un avait une idée ingénieuse.

Par ailleurs, si quelqu'un peut expliquer les mathématiques qui se cachent derrière -webkit-perspective Je peux trouver la position, car c'est la seule chose que je ne sais pas comment modéliser.

Answer 1

Avez-vous essayé d'utiliser getBoundingClientRect() ?

Je l'ai utilisé avec succès dans le passé pour calculer les dimensions des éléments qui ont été transformés à l'aide de la fonction transform propriété.

Answer 2

Le problème est que les transformations CSS3 ne modifient en rien la position des éléments. Bien sûr, les navigateurs "savent" qu'ils sont repositionnés, parce qu'ils les rendent, mais cette information n'est pas renvoyée au DOM/API.

La seule chose à laquelle je peux penser, c'est de calculer vous-même les positions sur la base des transformations, puisque celles-ci sont "simples" transformations matricielles .

Malheureusement, le cours d'algèbre date de trop longtemps pour que je puisse vous dire comment faire, mais seulement que c'est possible.

Answer 3

Utilisation getBoundingClientRect est une bonne idée, mais elle ne vous donnera que les coordonnées du rectangle qui contient votre forme, et non les coordonnées exactes des 4 coins topleft, bottomright, bottomleft, topright.

Vous ne pouvez le faire qu'en prenant chacune de ces coordonnées non transformées et en appliquant la transformation via javascript.