Récupération de la largeur et de la hauteur après transformation

Lors de l'application d'une transformation telle que rotation (45deg) à un élément, les dimensions visuelles de cet élément changement. Cependant, les propriétés de largeur et de hauteur en JavaScript reflètent toujours les dimensions d'origine non transformées.

Solution : Utilisation de getBoundingClientRect()

Pour obtenir les dimensions mises à jour après la transformation, utilisez l'option méthode getBoundingClientRect() sur HTMLDOMElement. Cette méthode renvoie un objet contenant la hauteur et la largeur transformées.

Exemple :

// Get the element
const element = document.querySelector('.transformed');

// Calculate the rotated dimensions
const rect = element.getBoundingClientRect();

// Access the rotated width and height
const rotatedWidth = rect.width;
const rotatedHeight = rect.height;

Démo :

Visitez ce jsFiddle pour un exemple pratique : https://jsfiddle.net/your_url_here

Remarque : Cette méthode vous donnera les dimensions de l'élément entier, y compris les bordures ou le remplissage. Si vous devez calculer uniquement les dimensions du contenu, vous devez utiliser offsetWidth et offsetHeight sur l'élément de contenu de l'élément (par exemple,