Ottenere la dimensione di un elemento di CSS3 trasformato

Question

mi piacerebbe recuperare la dimensione di un div che ho applicato un CSS3 trasformare a.

-webkit-transform: scale3d(0.3, 0.3, 1); 

Così, effettivamente ho reso l'elemento il 30% della sua dimensione originale. Tuttavia, quando interrogo gli elementi width/height, riporta la dimensione dell'elemento prima dell'applicazione della trasformazione.

Capisco che questo è in realtà il comportamento corretto e che l'elemento non modifica dimensioni, ma il suo contenuto fa. Ma, e la ragione per cui mi sto chiedendo qui, se faccio un click destro sull'elemento e selezionare "Inspect Element" dal menu a comparsa (sto usando Safari su un Mac solo ora) l'elemento viene evidenziato e la dimensione del rendering è presentata nel tooltip del browser collegato all'elemento.

Quindi, questo suggerisce che il browser 'conosce' la dimensione reso ma non ho trovato il modo di questo tipo di informazione ancora. Qualcuno può aiutarmi?

Answer 1

Wow, questo è stato più difficile di quanto mi aspettassi. Sono sorpreso quanto te che non c'è un modo semplice.

Here is a proof of concept.

Ecco il JS:

$('div').each(function() { 
    var matrix = window.getComputedStyle(this).webkitTransform, 
     data; 
    if (matrix != 'none') { 
     data = matrix.split('(')[1].split(')')[0].split(','); 
    } else { 
     data = [1,null,null,1]; 
    } 
    $(this).text($(this).width() * data[0] + 'x' + $(this).height() * data[3]); 
}); 

La chiave è la funzione che restituisce getComputedStyle() obnoxiously una matrice come una stringa che deve essere analizzato in un array prima che sia utile. Tuttavia contiene i rapporti di trasformazione resi che possono essere moltiplicati dalle dimensioni CSS per ottenere le dimensioni del rendering.

Riferimento: CSS Tricks

Answer 2

È possibile utilizzare il metodo getBoundingClientRect() su elementi per ottenere le dimensioni. Prende in considerazione la matrice di trasformazione (quindi non è necessario fare alcuna matematica da soli).

var elementDimensions = element.getBoundingClientRect(); 

jsFiddle.