如何获得CSS3-3d转换元素的屏幕位置？

Question

我有一个非常复杂的网站，建立在CSS3上，它具有三维变换，旋转，翻转，翻转和一般扭曲的html元素。

我正在试图弄清楚其中一个元素的屏幕位置，并且看不到任何方法。我想知道是否有人有任何巧妙的想法。

或者，如果有人可以解释-webkit-perspective背后的数学，我可以找出这个位置，因为这是我唯一不确定如何建模的。

Answer 1

您是否尝试过使用getBoundingClientRect()？

我过去曾成功使用它来计算已使用transform属性转换的元素的维度。

Answer 2

问题是，CSS3转换实际上并没有改变元素的位置。当然，浏览器“知道”它们被重新定位，因为它呈现它们，但是这些信息不会提供给DOM / API。

我唯一能想到的是根据自己的变换来计算位置，因为这些是“简单的”matrix transformations。

不幸的是，代数课已经很久了，我不能告诉你怎么做 - 只有这样才有可能。

Answer 3

使用getBoundingClientRect是一个好主意，但只会给出包含你的形状的矩形的坐标，而不是4个topleft，bottomright，bottomleft，topright corner的确切坐标。

你只能通过获取每个非变换坐标并通过javascript应用变换来实现这一点。