Nullify transforms (primarily rotation) in getBoundingClientRect?

Question

I'm currently using this as a workout (just flat out removing the transform, getting the rect, and putting it back).

  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]);

The reason why I'm asking is because this is for a 'mock-up' component, i.e. you give it an image and it returns a nice mock-up. The general idea is that you just wrap it in whatever sized container you want, and it will auto-size everything with JS so the mock-up looks perfect. It's essentially 2 layers, the phone-frame img up top and the screen img below. I grab the width/height of the parent container and do a calculation to make the "screen" image line up perfectly with the phone.

If I don't completely remove the rotation transform before using getBoundingClientRect(), it calculates the width with the transform included, which screws up the element sizing. My current solution just feels sort of janky, and it makes you unable to change transforms on the parent container's CSS style sheet without a JS solution (because the transform just gets readded to inline-styles).