如何获取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

请将其发布为接受答案的评论，而不是添加新答案 –

回答