有没有办法在 webkit CSS 3d 转换后获得边界框？

Question

我正在使用 Safari 3d 转换来制作一些效果。我想使用经典的 Coverflow 效果放置一些图像。问题是我想知道每个图像在用

旋转后的确切宽度

-webkit-transform : rotateY( angle deg);

请注意，我什至应用了透视。

当然，DOM 给出了原始图像的宽度，但是如何获取边界框或仅获取宽度？我尝试使用余弦和三角函数，但我获得的数字与屏幕上的结果不同。这可能是由于视角。无论如何要计算我刚刚完成的旋转后的宽度：ImageWidth * cos(angle)。如果有办法获得转换后对象的边界框，我就完成了。

Answer 1

我自己还没有对此进行测试，但想到的一个潜在解决方案是在旋转图像的每个角上模拟鼠标事件，然后使用这些事件的属性来查找边界区域。

This question 有一个通过传入一些参数来调度鼠标事件的解决方案。在您的情况下，在从图像调度的模拟鼠标事件中，layerX 和layerY 将在对象空间中。然后您可以监听该事件并使用它的pageX 和pageY 来获取世界空间中的坐标。

这主要是推测性的，但如果一个假的鼠标事件表现得像一个真实的，你应该能够得到这些数字而无需繁琐的数学运算。