Вычислить ограничивающий прямоугольник X, Y, Высота и Ширина повернутого элемента через JavaScript

В основном я задаю этот вопрос для JavaScript: Вычислить координаты прямоугольника с поворотным прямоугольником

В этом случае:

• iX = Ширина вращающегося (синего) элемента HTML
• iY = Высота вращающегося (синего) элемента HTML
• bx = Ширина ограничивающего блока (красный)
• by = Высота рамки ограничения (красный)
• x = X координаты ограничивающего блока (красный)
• y = Y координаты ограничивающего блока (красный)
• iAngle/t = Угол поворота элемента HTML (синий, не показан, но используется в коде ниже), FYI: В этом примере это 37 градусов (не так важно для примера)

Как рассчитать X, Y, Высота и Ширина ограничивающего прямоугольника (все красные числа), окружающего повернутый элемент HTML (учитывая его ширину, высоту и угол поворота) через JavaScript? Ключом к этому будет получение вращающегося элемента HTML (синий квадрат) исходных кодов X/Y для использования в качестве смещения как-то (это не представлено в коде ниже). Для определения центральной точки может потребоваться CSS3 transform-origin.

У меня есть частичное решение, но расчет кодов X/Y не работает должным образом...

var boundingBox = function (iX, iY, iAngle) {
    var x, y, bx, by, t;

    //# Allow for negetive iAngle that rotate counter clockwise while always ensuring iAngle < 360
    t = ((iAngle < 0 ? 360 - iAngle : iAngle) % 360);

    //# Calculate the width (bx) and height (by) of the .boundingBox
    //#     NOTE: See https://stackoverflow.com/info/3231176/how-to-get-size-of-a-rotated-rectangle
    bx = (iX * Math.sin(iAngle) + iY * Math.cos(iAngle));
    by = (iX * Math.cos(iAngle) + iY * Math.sin(iAngle));

    //# This part is wrong, as it re-calculating the iX/iY of the rotated element (blue)
    //# we want the x/y of the bounding box (red)
    //#     NOTE: See https://stackoverflow.com/info/9971230/calculate-rotated-rectangle-size-from-known-bounding-box-coordinates
    x = (1 / (Math.pow(Math.cos(t), 2) - Math.pow(Math.sin(t), 2))) * (bx * Math.cos(t) - by * Math.sin(t));
    y = (1 / (Math.pow(Math.cos(t), 2) - Math.pow(Math.sin(t), 2))) * (-bx * Math.sin(t) + by * Math.cos(t));

    //# Return an object to the caller representing the x/y and width/height of the calculated .boundingBox
    return {
        x: parseInt(x), width: parseInt(bx),
        y: parseInt(y), height: parseInt(by)
    }
};

Я чувствую, что я так близко, и все же до сих пор...

Большое спасибо за любую помощь, которую вы можете предоставить!

ПОМОЧЬ НЕАВАТРИКАМ...

После поворота элемента HTML браузер возвращает "матричное преобразование" или "матрицу вращения", которая выглядит так: rotate(Xdeg) = matrix(cos(X), sin(X), -sin(X), cos(X), 0, 0); См. это для дополнительной информации.

У меня есть ощущение, что это просветит нас о том, как получить X, Y ограничивающего прямоугольника (красного), основанного исключительно на ширине, высоте и углу повернутого элемента (синий).

Новая информация

Humm... интересно...

Кажется, что каждый браузер обрабатывает вращение по-разному с точки зрения X/Y! FF полностью игнорирует его, IE и Opera рисуют ограничивающий прямоугольник (но его свойства не отображаются, то есть: bx и by), а Chrome и Safari вращают прямоугольник! Все правильно сообщают X/Y, кроме FF. Итак... проблема X/Y, похоже, существует только для FF! Как очень странно!

Также следует отметить, что $(document).ready(function () {...}); срабатывает слишком рано, чтобы повернутый X/Y был распознан (что было частью моей первоначальной проблемы!). Я вращаю элементы непосредственно перед тем, как запросы запроса X/Y в $(document).ready(function () {...});, но они, похоже, не обновляются до некоторого времени после (!?).

Когда я получу немного больше времени, я подниму jFiddle с примером, но я использую модифицированную форму "jquery-css-transform.js", поэтому у меня есть крошечный бит во время тренировки перед jFiddle...

Итак... что, FireFox? Это не круто, мужчина!

Участок Thickens...

Ну, FF12, похоже, исправляет проблему с FF11 и теперь действует как IE и Opera. Но теперь я вернулся на круги своя с X/Y, но по крайней мере я думаю, что знаю, почему сейчас...

Кажется, что даже если X/Y правильно сообщается браузерами для повернутого объекта, "Xhost" X/Y все еще существует в версии без вращения. Кажется, что это порядок операций:

• Начиная с невращающегося элемента на X, Y 20,20
• Поверните указанный элемент, в результате чего отчет X, Y будет равен 15,35
• Переместить указанный элемент через JavaScript/CSS в X, Y 10,10
• Браузер логически отключает элемент до 20,20, перемещается на 10,10, затем снова вращается, в результате получается X, Y 5,25

Итак... Я хочу, чтобы элемент оказался на 10.10 после ротации, но благодаря тому, что элемент (по-видимому) перевернутый пост-ход, получившийся X, Y отличается от множества X, У.

Это моя проблема! Так что мне действительно нужна функция, чтобы взять желаемые координаты места (10,10) и работать назад оттуда, чтобы получить стартовые координаты X, Y, которые приведут к повороту элемента в 10,10. По крайней мере, я знаю, какова моя проблема сейчас, благодаря внутренней работе браузеров, кажется, что это вращающийся элемент 10 = 5!