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

有没有办法在webkit CSS 3d转换后获得边界框?,3d,webkit,3d,Webkit,我正在使用Safari 3d变换来实现一些效果。我想用经典的Coverflow效果来展示一些图片。问题是,我想知道每个图像旋转后的确切宽度 -webkit-transform : rotateY( angle deg); 注意,我甚至应用了透视图 当然,DOM给出了原始图像的宽度,但是如何获得边界框或仅仅是宽度?我尝试使用余弦和三角学,但得到的数字与屏幕上的结果不同。也许这是因为这个观点。无论如何,为了计算旋转后的宽度,我刚刚做了:ImageWidth*cos(角度)。如果有一种方法可以得到变

我正在使用Safari 3d变换来实现一些效果。我想用经典的Coverflow效果来展示一些图片。问题是,我想知道每个图像旋转后的确切宽度

-webkit-transform : rotateY( angle deg);
注意,我甚至应用了透视图


当然,DOM给出了原始图像的宽度,但是如何获得边界框或仅仅是宽度?我尝试使用余弦和三角学,但得到的数字与屏幕上的结果不同。也许这是因为这个观点。无论如何,为了计算旋转后的宽度,我刚刚做了:ImageWidth*cos(角度)。如果有一种方法可以得到变换对象的边界框,我就可以用它了。

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

有一个解决方案,用于调度带有传入参数的鼠标事件。在您的情况下,在从图像发送的模拟mouseevent中,
layerX
layerY
将位于对象空间中。然后您可以监听该事件,并使用其
pageX
pageY
获取世界空间中的坐标


这主要是推测性的,但是如果一个假的mouseevent的行为像一个真实的mouseevent,那么你应该能够得到这些数字,而不需要繁琐的数学运算。

我自己还没有测试过这一点,但我想到的一个潜在解决方案是在旋转图像的每个角落模拟鼠标事件,然后使用这些事件的属性来找到边界区域

有一个解决方案,用于调度带有传入参数的鼠标事件。在您的情况下,在从图像发送的模拟mouseevent中,
layerX
layerY
将位于对象空间中。然后您可以监听该事件,并使用其
pageX
pageY
获取世界空间中的坐标


这主要是推测性的,但是如果一个假的mouseevent的行为像一个真实的mouseevent,那么你应该能够得到这些数字,而不需要繁琐的数学运算。

你到底想做什么?
getBoundingClientRect()
有什么问题吗?查看发布日期。现在我能准确地记得了,但也许在过去它是无效的。你到底想做什么?
getBoundingClientRect()
有什么问题吗?查看发布日期。现在我能准确地记得了,但也许回到过去,这是没有用的。