For example:

<style>
    div {
        width: 500px;
        height: 100px;
        position: absolute;
        left: 50px;
        top: 200px;
        background-color: blue;
        transform: rotate(50deg);
    }
</style>
<div>
    <input id="button" type="button" />
</div>
<script>
    const rect = button.getClientRects()[0];
    console.log(`${rect.x} ${rect.y}`);
</script>

This renders as:

As is, this page currently logs:

623280.655 WebContent(55498): (js log) "44.125 199.734375"

Which is too far leftward and downward from where the button actually is.

If we change the width/height to 0, this page renders as:

And we notably get the same coordinates from getClientRects(), and those coordinates are where the button is located.

So it appears getClientRects() does not account for the width/height of the transformed parent element.