¿Cómo obtener la posición de la pantalla de los elementos transformados CSS3-3d?

Question

Tengo un sitio muy complicado basado en CSS3 que tiene elementos html transformados en 3D, rotados, volteados, flopeados y en general distorsionados.

Estoy tratando de averiguar la ubicación en pantalla de uno de estos elementos y no veo ninguna manera de hacerlo. Me preguntaba si alguien tiene ideas ingeniosas.

Alternativamente, si alguien puede explicar las matemáticas detrás de -webkit-perspective, puedo averiguar la posición ya que es lo único que no estoy seguro de cómo modelar.

Answer 1

¿Ha intentado utilizar getBoundingClientRect()?

Lo he usado con éxito en el pasado para calcular las dimensiones de los elementos que se han transformado con la propiedad transform.

Answer 2

El problema es que las transformaciones CSS3 en realidad no cambian la posición de los elementos de todos modos. Por supuesto, los navegadores "saben" que están reubicados, porque los renderizan, pero esta información no se proporciona de vuelta al DOM/API.

Lo único que se me ocurre es calcular las posiciones basadas en las transformaciones usted mismo, ya que estas son "simples" matrix transformations.

Desafortunadamente, la clase Algebra ha sido hace mucho tiempo, que no puedo contarte más cómo hacerlo, solo que es posible.

Answer 3

El uso de getBoundingClientRect es una buena idea, pero solo le dará las coordenadas del rectángulo que contiene su forma, no las coordenadas exactas de las esquinas de 4 topleft, bottomright, bottomleft, topright.

Solo podrá hacer esto tomando cada una de esas coordenadas no transformadas y aplicando la transformación a través de javascript.