Jak uzyskać położenie elementu przekształconego za pomocą css obracać

Question

Mam problem z uzyskaniem pozycji elementu div po zastosowaniu filtru rotate. Mam pozycję jednego końca, jego wysokość i kąt obrotu, ale po sprawdzeniu, co ten filtr faktycznie robi na MDN ("[cos (kąt) sin (kąt) -sin (kąt) cos (kąt) 0 0] ") Wciąż nie wiem jak to złamać.

Przykład:

Div Jestem zainteresowany jest linia przerywana. Jego stylistyka w tym momencie było:

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

(top/left opisać położenie jego początku.) Próbuję uzyskać pozycję top/left jej końca.

Answer 1

Per aktualnej pytanie i żądanie potwierdzenia:

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

Rozwiązanie można znaleźć w tej drugiej SO Answer dla innym pytaniu, wzmocnione tutaj:

// 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)) 
    }; 
}; 

Oto interaktywna jsFiddle, która zapewnia aktualizacje w czasie rzeczywistym dla funkcji getPositionData();.
Będzie można zobaczyć wartości i left na końcu procesu, który kontrolujesz.

referencyjny:     jsFiddle

status Aktualizacja: Powyższy jsFiddle działa świetnie na 0-90deg i mogą zostać zatwierdzone po wszystkich kątach i różnych jednostek, takich jak rad, grad, and turn.

Answer 2

Spróbuj użyć element.getBoundingClientRect()

Według MDN:

Począwszy od Gecko 12,0 (Firefox/Thunderbird 12.0 12.0), efekt CSS przemienia się uwzględniane przy obliczaniu elementu ograniczającego prostokąta.