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

admin管理员组

文章数量:1246460

I have a very plicated 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.

I have a very plicated 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.

• javascript
• css
• css-transforms
• webkit-transform

Share Improve this question Follow edited Apr 13, 2022 at 11:57 Dharman♦ 33.4k2727 gold badges101101 silver badges147147 bronze badges asked Nov 6, 2011 at 6:46 user578895user578895

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 11

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.

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.

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.

本文标签： javascriptHow to get screen position of CSS33d transformed elementsStack Overflow