我有一个基于 CSS3 构建的非常复杂的网站，它的 html 元素经过 3d 转换、旋转、翻转、翻转，并且通常会失真。
我试图找出其中一个元素在屏幕上的位置，但看不到任何方法。我想知道是否有人有任何巧妙的想法。
或者，如果有人可以解释背后的数学-webkit-perspective，我可以弄清楚这个位置，因为这是我唯一不确定如何建模的东西。
问问题
2616 次
3 回答
13
你试过使用getBoundingClientRect()吗？
我过去曾成功地使用它来计算已使用该transform属性转换的元素的尺寸。
于 2012-06-14T00:05:47.757 回答
1
问题是，CSS3 转换实际上并没有改变元素的位置。当然，浏览器“知道”它们被重新定位，因为它会渲染它们，但不会将这些信息提供回 DOM/API。
我唯一能想到的就是自己根据变换计算位置，因为这些是“简单”的矩阵变换。
不幸的是，代数课已经太久了，我不能再告诉你怎么做——只有它是可能的。
于 2011-11-06T11:27:08.407 回答
0
使用getBoundingClientRect是一个好主意，但只会为您提供包含您的形状的矩形的坐标，而不是 4 个左上角、右下角、左下角、右上角的确切坐标。
您只能通过获取每个未转换的坐标并通过 javascript 应用转换来做到这一点。
于 2013-09-24T13:55:05.420 回答