Obtenir la taille d'un élément transformé CSS3

Question

J'aimerais récupérer la taille d'un div auquel j'ai appliqué une transformation CSS3.

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

Donc, effectivement, j'ai rendu l'élément 30% de sa taille d'origine.Cependant, lorsque j'interroge les éléments largeur / hauteur, cela indique la taille de l'élément avant que la transformation ne soit appliquée.

Je comprends que c'est en fait le comportement correct et que l'élément ne change pas réellement de taille mais son contenu le fait.Mais, et la raison pour laquelle je pose la question ici, si je fais un clic droit sur l'élément et sélectionnez "inspecter l'élément" dans le menu contextuel (j'utilise Safari sur un Mac en ce moment) l'élément est mis en surbrillance etla taille du rendu est présentée dans l'info-bulle du navigateur attachée à l'élément.

Donc, cela suggère que le navigateur "connaît" la taille du rendu mais je n'ai pas encore trouvé de moyen d'accéder à ces informations.Quelqu'un peut-il m'aider?

Answer 1

Wow, c'était plus compliqué que ce à quoi je m'attendais.Je suis aussi surpris que vous qu'il n'y ait pas de solution facile.

Voici une preuve de concept.

Voici le 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 clé est la fonction getComputedStyle() qui renvoie odieusement une matrice sous forme de chaîne qui doit être analysée dans un tableau avant qu'elle ne soit utile.Cependant, il contient les taux de transformation rendus qui peuvent être multipliés par les dimensions CSS pour obtenir la taille du rendu.

Référence: Astuces CSS

Answer 2

Vous pouvez utiliser la méthode getBoundingClientRect() sur les éléments pour obtenir les dimensions.Il prend en compte la matrice de transformation (vous n'avez donc pas besoin de faire de calcul vous-même).

var elementDimensions = element.getBoundingClientRect();

jsFiddle .