Search code examples
javascriptcsscss-transformswebkit-transform

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

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.

Solution

  • 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.