How to get screen position of CSS3-3d transformed elements?

Question

I have a very complicated site built on CSS3 that has html elements 3d-transformed, rotated, flipped, flopped and just generally distorted.

I'm trying to figure out the on-screen location of one of these elements and don't see any way to do so. I was wondering if anyone has any ingenious ideas.

Alternatively, if anyone can explain the math behind -webkit-perspective, I can figure out the position as that's the only thing I'm not sure how to model.

Answer 1

Have you tried using getBoundingClientRect()?

I've used it successfully in the past to calculate the dimensions of elements that have been transformed with the transform property.