如何将持续旋转的元素缩放适配固定尺寸容器，避免旋转时被裁切？

核心问题成因 #

• 旋转的矩形元素的轴对齐外接尺寸会随旋转角度动态变化，原有实现仅按0度对齐状态设置max-width:100%，旋转后外接尺寸超出容器边界，自然会被裁切。
• StreamElements Widget的内部DOM设置overflow:visible不会生效，因为平台宿主层会统一将超出iframe可视范围的内容强制裁切，这是平台渲染机制限制，无法绕过，因此必须从计算层面保证元素渲染时的外接尺寸永远不超出可视容器范围，从根源上避免裁切。
• 硬编码固定关键帧scale值的方案无法适配不同宽高比的图片、不同尺寸的容器，可靠性不足。

实现逻辑 #

核心思路是在动画的每一帧，根据当前实时旋转角度，动态计算当前角度下图片可达到的最大缩放比例，保证旋转后的图片外接矩形完全落在可视容器范围内，同时让图片尽可能占满空间，不做无意义的过度缩小。
旋转θ角的矩形外接尺寸计算公式：

• 轴对齐宽度 = 图片原生宽 * |cosθ| + 图片原生高 * |sinθ|
• 轴对齐高度 = 图片原生宽 * |sinθ| + 图片原生高 * |cosθ|
  在此基础上，当前角度下的最大允许缩放值为：
  scale = min( 容器可视最大宽度 / 外接宽度, 容器可视最大高度 / 外接高度 )
  最终动画的transform值为 scale(当前计算值) rotate(当前角度)，全程无固定硬编码数值，可适配任意比例图片、任意容器尺寸。

完整实现代码 #

HTML #

<div class="main-container">
    <img id="rotatingImg" src="some_url" alt="">
</div>

CSS #

.main-container {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
}
#rotatingImg {
    /* *必须设置为中心旋转*，否则旋转外接尺寸计算会出现偏移，导致缩放值不准 */
    transform-origin: center center;
    will-change: transform; /* 优化动画渲染性能，减少卡顿 */
}

JS #

const img = document.getElementById('rotatingImg');
const container = document.querySelector('.main-container');
// 动画基础参数：5秒旋转一圈，和原CSS动画速度一致
const rotateSpeed = 360 / 5000;
let currentAngle = 0;
let imgNaturalW = 0;
let imgNaturalH = 0;
let containerW = 0;
let containerH = 0;
// 重新读取容器可视尺寸
function updateContainerSize() {
    containerW = container.clientWidth;
    containerH = container.clientHeight;
}
// 图片加载完成后读取原生尺寸，再启动动画
img.addEventListener('load', () => {
    imgNaturalW = img.naturalWidth;
    imgNaturalH = img.naturalHeight;
    updateContainerSize();
    requestAnimationFrame(animate);
});
// 监听容器尺寸变化，适配后台调整Widget大小的场景
new ResizeObserver(updateContainerSize).observe(container);
// 动画帧循环
function animate() {
    // 更新当前旋转角度，转弧度用于三角函数计算
    currentAngle = (currentAngle + rotateSpeed * 16) % 360;
    const rad = currentAngle * Math.PI / 180;
    const cosVal = Math.abs(Math.cos(rad));
    const sinVal = Math.abs(Math.sin(rad));
    // 计算当前角度下的图片外接尺寸
    const boundW = imgNaturalW * cosVal + imgNaturalH * sinVal;
    const boundH = imgNaturalW * sinVal + imgNaturalH * cosVal;
    // 计算当前角度下的最大允许缩放值
    const scale = Math.min(containerW / boundW, containerH / boundH);
    // 应用最终transform
    img.style.transform = `scale(${scale}) rotate(${currentAngle}deg)`;
    requestAnimationFrame(animate);
}

效果说明 #

• 0度旋转时，图片会自动计算最大可用尺寸，和原有正常显示效果一致，不会因为兼容其他角度做提前缩小。
• 旋转到任意角度时，都会实时计算当前角度下的最大允许尺寸，保证图片完整不被裁切。
• 所有计算都是动态完成的，没有硬编码的固定缩放值，不管替换什么比例的图片、调整什么大小的容器，都不需要修改动画参数，自动适配。

内容的提问来源于stack exchange，提问作者AFoeee