如何獲取CSS3-3d轉換元素的屏幕位置？

我有一個建立在CSS3上的非常複雜的網站，它具有3D元素轉換，旋轉，翻轉，觸發和一般扭曲的html元素。如何獲取CSS3-3d轉換元素的屏幕位置？

我想弄清楚這些元素之一的屏幕上的位置，並沒有看到任何方式來這樣做。我想知道是否有人有任何巧妙的想法。

另外，如果任何人都可以解釋-webkit-perspective背後的數學，我可以找出這個位置，因爲這是我不知道如何建模的唯一的事情。

2011-11-06 Mark Kahn

您是否嘗試過使用getBoundingClientRect()？

我過去成功地使用它來計算已使用transform屬性轉換的元素的尺寸。

2012-06-14 00:05:47 alex

問題是，CSS3轉換實際上並沒有改變元素的位置。當然，瀏覽器「知道」它們被重新定位，因爲它呈現它們，但是這些信息不會返回給DOM/API。

我能想到的唯一的事情就是根據自己的轉換來計算位置，因爲這些是「簡單的」matrix transformations。

不幸的是，代數課已經太早了，我不能再告訴你如何去做 - 只有這是可能的。

2011-11-06 11:27:08 RoToRa

是的，我知道問題是什麼:)我很樂意自己計算它，但正如我所說我不知道'-webkit-perspective'背後的數學究竟是什麼。它的作用有點像焦距控制，但wtf確實是'-webkit-perspective：500'實際上是指？！？ –

看看three.js的CSS3DRenderer。從我記憶中，他們拿着相機的視野（fov），並乘以寬度或高度來獲得視角。所以這與那些有關。 – Funkodebat

使用getBoundingClientRect是一個不錯的主意，但只會給你包含你的形狀的矩形的座標，而不是4個左右，右上角，左下角，右上角的確切座標。

您只能通過獲取每個未轉換的座標並通過javascript應用轉換來完成此操作。

2013-09-24 13:55:05 user2755763

請將其發佈爲接受答案的評論，而不是添加新答案 –

回答