开发者

Is there a way to get a bounding box after a webkit CSS 3d transform?

开发者 https://www.devze.com 2023-01-12 16:43 出处:网络
I\'m using Safari 3d transforms to do some effects. I\'d like to lay down some images using the classic Coverflow effect. The problem is that I\'d like to know the exact width of each image after it h

I'm using Safari 3d transforms to do some effects. I'd like to lay down some images using the classic Coverflow effect. The problem is that I'd like to know the exact width of each image after it has been rotated with

-webkit-transform : rotateY( angle deg);

Notice I even apply perspective.

Of course the DOM gives the width of the original image, but how to get a bounding box or just the width? I tried using cosine and trigonometry but the figures I obtain are different from the on sc开发者_高级运维reen result. Probably this is due to the perspective. Anyway to calculate the width after rotation I just done: ImageWidth * cos(angle). If there was a way to get a bounding box of the transformed object I'd be done with it.


Haven't tested this myself yet, but a potential solution that comes to mind is simulating a mouse event on each corner of the rotated image and then using properties of those events to find the boundary area.

This question has a solution for dispatching a mouse event with some arguments passed in. In your case, in a simulated mouseevent dispatched from the image, layerX and layerY would be in object space. Then you could listen for that event and use its pageX and pageY to get a coordinate in world space.

This is mostly speculative, but if a fake mouseevent acts like a real one, you should be able to get at these numbers with no cumbersome math needed.

0

精彩评论

暂无评论...
验证码 换一张
取 消