Есть ли способ получить ограничивающий прямоугольник после CSS-преобразования webkit?

Question

Я использую Safari 3D-преобразования для создания некоторых эффектов.Я хотел бы сложить некоторые изображения, используя классический эффект Coverflow.Проблема в том, что я хотел бы узнать точную ширину каждого изображения после его поворота с

-webkit-transform : rotateY( angle deg);

Обратите внимание, я даже применяю перспективу.

Конечно, DOM дает ширинуоригинального изображения, но как получить ограничивающий прямоугольник или только ширину?Я пытался использовать косинус и тригонометрию, но полученные цифры отличаются от результатов на экране.Вероятно, это связано с перспективой.В любом случае, чтобы вычислить ширину после поворота, я только что сделал: ImageWidth * cos (angle).Если бы был способ получить ограничивающую рамку преобразованного объекта, я бы покончил с этим.

Answer 1

Я еще не проверял это сам, но потенциальное решение, которое приходит на ум, - это имитировать событие мыши в каждом углу повернутого изображения, а затем использовать свойства этих событий, чтобы найти граничную область.

Этот вопрос имеет решение для отправки события мыши с некоторыми переданными аргументами. В вашем случае, в имитируемом событии мыши, отправленном с изображения, layerX и layerY будут в объектном пространстве.Затем вы можете прослушать это событие и использовать его pageX и pageY, чтобы получить координату в мировом пространстве.

Это в основном умозрительно, но если фальшивое событие мыши действует как реальное, вы должныв состоянии добраться до этих чисел без громоздкой математики.