Come ottenere la posizione dell'elemento trasformato con css ruotare

Question

Sto avendo un problema con ottenere la posizione di un div dopo rotate filtro viene applicato ad esso. Ho la posizione di una estremità, la sua altezza e l'angolo con cui viene ruotata, ma dopo aver controllato cosa fa effettivamente questo filtro su MDN ("[cos (angolo) sin (angolo) -sin (angolo) cos (angolo) 0 0] ") Ancora non so come romperlo.

Esempio:

Il div mi interessa è la linea tratteggiata. Il suo stile in quel momento era:

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

(top/left descrivono la posizione del suo inizio.) Sto cercando di ottenere la posizione top/left della sua fine.

Answer 1

Per la tua domanda attuale e la conferma della richiesta di:

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

La soluzione può essere trovata in questo altro SO Answer per un diversa domanda, Enhanced qui:

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

Ecco uno interattivo jsFiddle che fornisce aggiornamenti in tempo reale per la funzione getPositionData();.
Sarete in grado di vedere i valori top e left alla fine della rotazione processo CSS3 che controlli.

Riferimento:     jsFiddle

Status Update: È possibile che questo jsFiddle grandi opere per 0-90deg e può essere approvato al momento per tutti gli angoli e le unità diverse, come rad, grad, and turn.

Answer 2

Prova utilizzando element.getBoundingClientRect()

Secondo MDN:

A partire dal Gecko 12.0 (12.0 Firefox/Thunderbird 12.0), l'effetto di CSS trasforma è considerato nel calcolo dell'elemento rettangolo di delimitazione.