如何重新缩放连续旋转的元素以完全适合其（固定大小）容器？

const cont= document.querySelector('.main-container');
const rot= document.querySelector('.rotater');
const H= rot.offsetHeight, h= cont.offsetHeight;
const W= rot.offsetWidth;

var t=0;

var anim= setInterval(rotate, 20);
function rotate(){
    rot.style.transform= "rotate(-" + t + "deg)";
    update(t);
    t++;
}

function update(T){
    let alpha= Math.atan(H/W);
    let diagLength= Math.sqrt(
        Math.pow(H, 2) + Math.pow(W, 2));
    let theta= degToRad(T);
    theta= radTrunc(theta);
    theta= (theta> Math.PI/2 && theta< Math.PI) || (theta> 3*Math.PI/2 && theta< 2*Math.PI) ? Math.PI - theta : theta;
    let beta= (Math.PI/2) - (alpha + theta);
    let nonScaledHeight= Math.cos(beta) * diagLength;
    let ratio= Math.abs(h/nonScaledHeight);
    ratio= ratio> 1 ? 1 : ratio;
    rot.style.transform += " scale(" + ratio + ")";
}

function degToRad(angle){
 return angle * Math.PI / 180;
}

function radTrunc(angle){
    while(angle> (Math.PI * 2)){
        angle -= Math.PI*2;
    }
    return angle;
}

    .main-container{
        width: 600px;
        height: 200px;
        background: blue;
    }
    .rotater{
        width: 250px;
        height: 200px;
        background: green;
        margin: auto;
    }

<div class="main-container">
    <div class="rotater"></div>
</div>