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.

Answer 2

The problem is, that the CSS3 transformations doesn't actually change the position of the elements in anyway. Of course the browsers "know" that they are repositioned, because it renders them, but this information is not provided back to the DOM/API.

The only thing I can think of, is to calculate the positions based on the transformations yourself, since these are "simple" matrix transformations.

Unfortunately Algebra class has been too long ago, that I can't tell you anymore how to do it - only that it is possible.

Answer 3

Using getBoundingClientRect is a good idea but will only give you the coordinates of the rectangle that contains your shape, not the exact coordinates of the 4 topleft, bottomright, bottomleft, topright corners.

You'd only be able to do this by taking each of those non-transformed coordinates and applying the transform via javascript.