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.

score 13 · Accepted Answer · answered Jun 14 '12 at 00:05

13

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.

answered Jun 14 '12 at 00:05

alex

479,566
201
878
984

just add . that if element have `transform-style: preserve-3d` it change the value that return from that functions. make it respect 3d world on not – pery mimon Jan 10 '19 at 11:42

score 1 · Answer 2 · answered Sep 24 '13 at 13:55

1

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.

answered Sep 24 '13 at 13:55

Patrick Brosset

46
2

3

please post this as a comment on the accepted answer instead of adding a new answer – Sep 24 '13 at 23:39
so you can post some script that implement the `getBoundingClientRect X transform metrix` – pery mimon Jan 15 '19 at 10:11

score 1 · Answer 3 · answered Nov 06 '11 at 11:27

1

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.

answered Nov 06 '11 at 11:27

RoToRa

37,635
12
69
105

3

yeah, I know what the issue is :) And I'd be happy to calculate it myself, but as I said I don't know what the math behind `-webkit-perspective` actually is. It acts somewhat like a focal length control, but wtf does `-webkit-perspective:500` actually mean?!? – Nov 06 '11 at 17:09
look at three.js 's CSS3DRenderer. From what I remember, they take the camera's field of view (fov), and multiply it by either the width or the height to get the perspective. So it's in relation to those. – dansch Jun 12 '17 at 20:20

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

3 Answers3

Linked

Related