Подтвердить что ты не робот

Как получить положение элемента, преобразованного с помощью css rotate

У меня возникла проблема с получением позиции div после применения фильтра rotate. У меня есть положение одного конца, его высота и угол поворота, но после проверки того, что этот фильтр действительно делает на MDN ( "[cos (угол) sin (угол) -sin (угол) cos (угол) 0 0]" ) Я до сих пор не знаю, как его взломать.

Пример:

Мне нужен div, это пунктирная линия. Его стиль в тот момент был:

left: 80px; top: 12px; height: 69.5122px; width: 2px; -moz-transform: rotate(-1.21366rad);

(top/left описать позицию его начала.) Я пытаюсь получить позицию top/left своего конца.

Ответ 1

В соответствии с вашим текущим Вопросом и запрошенным подтверждением:

var x = termin.top + Math.cos(angle) * div.height;
var y = div.left + Math.sin(angle) * div.height;

Решение можно найти в этом другом SO-ответе для другого вопроса, расширенного здесь:

// return an object with full width/height (including borders), top/bottom coordinates
var getPositionData = function(el) {
    return $.extend({
        width: el.outerWidth(false),
        height: el.outerHeight(false)
    }, el.offset());
};

// get rotated dimensions   
var transformedDimensions = function(el, angle) {
    var dimensions = getPositionData(el);
    return {
        width: dimensions.width + Math.ceil(dimensions.width * Math.cos(angle)),
        height: dimensions.height + Math.ceil(dimensions.height * Math.cos(angle))
    };
};

Здесь интерактивный jsFiddle, который предоставляет обновления в режиме реального времени для getPositionData();.
Вы сможете увидеть значения top и left в конце процесса CSS3 Rotation, который вы контролируете.

Ссылка: jsFiddle

Обновление состояния: Вышеупомянутый jsFiddle отлично подходит для 0-90deg и может быть одобрен для всех углов и разных единиц, таких как рад, град и поворот.

Ответ 2

Попробуйте использовать element.getBoundingClientRect()

Согласно MDN:

Начиная с Gecko 12.0 (Firefox 12.0/Thunderbird 12.0), эффект преобразования CSS рассмотренный при вычислении элемента, ограничивающего прямоугольник.