如何获取CSS3 3D变换元素的屏幕位置？

Question

我有一个非常复杂的网站，基于CSS3构建，并使用了html元素进行3D变形、旋转、翻转和扭曲等操作。

我正试图找出其中一个元素在屏幕上的位置，但是找不到任何方法来实现。我想知道是否有任何巧妙的想法。

或者，如果有人能够解释-webkit-perspective背后的数学原理，那我就可以弄清楚如何建模，从而确定位置。

- user578895

Answer 1

你尝试过使用getBoundingClientRect()吗？

我曾经成功地使用它来计算使用transform属性进行转换的元素的尺寸。

- alex

---

只需添加一个点，如果元素具有 transform-style: preserve-3d，它将更改从这些函数返回的值。使其遵守3D世界而不是2D。 - pery mimon

Answer 2

使用getBoundingClientRect是个好主意，但它只会给你包含形状的矩形的坐标，而不是四个角的精确坐标，即左上、右下、左下、右上。

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

- Patrick Brosset

---

请将此翻译为中文。仅返回已翻译的文本：请将其作为评论发布在已接受答案上，而不是添加新答案。 - user578895

你可以发布一些实现 getBoundingClientRect X transform metrix 的脚本。 - pery mimon

Answer 3

问题在于，CSS3 变换实际上并没有以任何方式改变元素的位置。当然，浏览器“知道”它们被重新定位了，因为它们呈现出来了，但是这些信息不会被提供回 DOM/API。

我所能想到的唯一办法就是根据变换自己计算位置，因为这些是“简单”的矩阵变换。

不幸的是，代数课已经过去太久了，我无法再告诉你如何做到这一点——只能告诉你这是可能的。

- RoToRa

---

是的，我知道问题出在哪里 :) 我很乐意自己计算，但正如我所说的，我不知道-webkit-perspective背后的数学原理。它的作用有点像焦距控制，但是-webkit-perspective:500实际上代表什么？！？ - user578895

看看 three.js 的 CSS3DRenderer。 从我记得的来看，他们获取相机的视角（fov），并将其乘以宽度或高度之一来获得透视效果。 因此，它与这些因素有关。 - dansch