Как изменить положение элемента с помощью css rotate

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

Пример :

введите здесь описание изображения

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

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

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


javascript css rotation css-transforms
person sasklacz    schedule 27.06.2012    source источник
comment
освежив свои математические знания, я придумал что-то вроде этого: var x = termin.top + Math.cos(angle) * div.height; var y = div.left + Math.sin(угол) * div.height; Может ли кто-нибудь подтвердить, правильное ли это решение?   -  person sasklacz    schedule 27.06.2012

Ответы (2)


arrow_upward
16
arrow_downward

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

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, которым вы управляете.

Ссылка: jsFiddle

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

person arttronics    schedule 01.07.2012

arrow_upward
5
arrow_downward

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

Согласно MDN:

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

person pozs    schedule 03.07.2012
comment
Известно ли нам, что другие браузеры учитывают преобразования с помощью getBoundingClientRect? Самое главное: в какой момент IE это делает? Работает ли он с IE9? - person Jimbo Jonny; 15.02.2016
comment
@JimboJonny из моего тестирования кажется, что IE9 также учитывает преобразования (но округляет результаты до целых пикселей). IE10 работает как любой другой браузер (не округляет результаты). - person pozs; 16.02.2016