Actualmente estoy usando esto como un entrenamiento (simplemente eliminando la transformación, obteniendo el rect y volviéndolo a colocar).

 useEffect(() => { if (typeof document !== undefined) { const ctn = document.getElementById(id); const parent = ctn.parentElement; const parentStyles = getComputedStyle(parent); const transform = parentStyles.transform; parent.style.transform = "rotate(0deg)"; const box = parent.getBoundingClientRect(); if (box.width > box.height * 0.5008) { // These numbers are specific to the aspect ratio of the phone frame, unrelated to question setHeight("100%"); setWidth(box.height * 0.5008); } else { setHeight(box.width * 1.9888); setWidth("100%"); } setBorderRadius(box.width * 0.125); parent.style.transform = transform; } }, [screen]);

La razón por la que estoy preguntando es porque esto es para un componente de 'simulacro', es decir, le das una imagen y te devuelve un buen simulacro. La idea general es que simplemente lo envuelva en el contenedor del tamaño que desee, y ajustará automáticamente el tamaño de todo con JS para que la maqueta se vea perfecta. Son esencialmente 2 capas, la imagen del marco del teléfono en la parte superior y la imagen de la pantalla en la parte inferior. Tomo el ancho/alto del contenedor principal y hago un cálculo para que la imagen de la "pantalla" se alinee perfectamente con el teléfono.

Si no elimino por completo la transformación de rotación antes de usar getBoundingClientRect(), calcula el ancho con la transformación incluida, lo que arruina el tamaño del elemento. Mi solución actual se siente un poco rara, y hace que no pueda cambiar las transformaciones en la hoja de estilo CSS del contenedor principal sin una solución JS (porque la transformación simplemente se agrega a los estilos en línea).