Ottenere le dimensioni di un elemento trasformato CSS3

Question

Vorrei recuperare le dimensioni di un div a cui ho applicato una trasformata CSS3.

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

Quindi, efficacemente ho fatto l'elemento del 30% delle sue dimensioni originali. Tuttavia, quando interrogio la larghezza/altezza degli elementi, riporta la dimensione dell'elemento prima che venga applicata la trasformazione.

Capisco che questo è in realtà il comportamento corretto e che l'elemento non cambia in realtà ma il suo contenuto lo fa. Ma, e il motivo per cui lo chiedo qui, se faccio un clic destro sull'elemento e seleziono "ispezione elemento" dal menu a comparsa (sto usando Safari su un Mac proprio ora) l'elemento è evidenziato e La dimensione rendering è presentata nell'ottimazione del browser collegato all'elemento.

Quindi, questo suggerisce che il browser "conosce" la dimensione resa ma non ho ancora trovato un modo di accedere a queste informazioni. Qualcuno può aiutarmi?

Answer 1

Wow, è stato più complicato di quanto mi aspettassi. Sono sorpreso come te che non ci sia un modo facile.

Ecco una prova del concetto.

Ecco 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 è il getComputedStyle() funzione che restituisce odiosamente una matrice come stringa che deve essere analizzata in un array prima che sia utile. Tuttavia, contiene i rapporti di trasformazione resi che possono essere moltiplicati per le dimensioni CSS per ottenere la dimensione resa.

Riferimento: Trucchi CSS

Answer 2

Puoi usare il getBoundingClientRect() Metodo sugli elementi per ottenere le dimensioni. Tiene conto della matrice di trasformazione (quindi non è necessario fare da solo la matematica).

var elementDimensions = element.getBoundingClientRect();

jsfiddle.