Come ottenere l'altezza effettiva (non originale) di un elemento ruotato da CSS

Question

Ho bisogno di ottenere l'altezza effettiva di diversi elementi diversi (per il preciso posizionamento personalizzato del tooltip) e alcuni di questi elementi (non tutti) vengono ruotati . $ (elem) .outerHeight() restituisce l'altezza originale, anziché l'altezza visualizzata effettiva.

Ecco il violino con un esempio molto semplice: http://jsfiddle.net/NPC42/nhJHE/

Vedo una possibile soluzione in questa risposta: https://stackoverflow.com/a/8446228/253974, ma sto ancora sperando che ci sia un modo più semplice.

Answer 1

Spolvera la geometria del liceo e le mie formidabili capacità grafiche, ho messo insieme questo diagramma. Se si dispone di variabili width, height e rotation in javascript, si potrebbe esprimere l'altezza in questo modo:

var rotated_height = width * Math.sin(rotation) + height * Math.cos(rotation); 

Answer 2

Se si sta solo andando a utilizzare rotazioni di 45 gradi e la larghezza e l'altezza sono sempre uguali, è possibile calcolare l'altezza effettiva ruotato utilizzando la matematica relativamente semplice Hypotenuse formula:

in cui si afferma che il quadrato della lunghezza dell'ipotenusa è uguale alla somma dei quadrati delle lunghezze degli altri due lati.

In questo caso, il lato più lungo sarebbe la diagonale dall'angolo all'angolo opposto. Questo grosso modo tradursi in jQuery in questo modo:

Math.sqrt(Math.pow($('#diamond').height(), 2) + Math.pow($('#diamond').width(), 2)) 

Vedi la versione aggiornata jsFiddle.