使用rotate()函数旋转图片后溢出 不隐藏溢出部分如何解决

元素执行rotate()旋转变换时，属于CSS合成层的绘制偏移，默认不会触发文档流重算元素旋转后的实际占位，因此会出现超出父容器、布局边界的溢出问题。在不使用overflow: hidden裁切内容的前提下，可通过以下方案解决：

• 动态计算旋转后外接矩形尺寸，自适应调整父容器大小
  任意角度旋转时，元素的最小外接矩形尺寸可以通过三角函数直接算出：设旋转角度为θ（需转换为弧度参与计算），元素原始宽度为w、高度为h，旋转后所需的最小容器宽度为 w * |cosθ| + h * |sinθ|，最小容器高度为 w * |sinθ| + h * |cosθ|。将父容器尺寸设置为该计算值，再将旋转后的图片在容器内居中，即可完整容纳元素，既不裁切也不会溢出。
  参考实现代码：

  const targetImg = document.querySelector('img')
  const rotateAngle = 30 // 替换为实际旋转角度
  const radian = rotateAngle * Math.PI / 180
  const { width: originW, height: originH } = targetImg.getBoundingClientRect()
  // 计算旋转后所需的容器尺寸
  const fitContainerW = originW * Math.abs(Math.cos(radian)) + originH * Math.abs(Math.sin(radian))
  const fitContainerH = originW * Math.abs(Math.sin(radian)) + originH * Math.abs(Math.cos(radian))
  // 更新父容器尺寸
  const parentBox = targetImg.parentElement
  parentBox.style.width = `${fitContainerW}px`
  parentBox.style.height = `${fitContainerH}px`
  parentBox.style.display = 'flex'
  parentBox.style.alignItems = 'center'
  parentBox.style.justifyContent = 'center'
  // 应用旋转效果
  targetImg.style.transform = `rotate(${rotateAngle}deg)`
  

• 直角旋转场景下调整变换原点+margin偏移适配
  如果仅需做90°、180°、270°这类直角旋转，不需要适配任意角度，可以直接修改旋转变换的基准点，配合外边距偏移让元素落在预期布局位置，无需动态计算尺寸。
  以顺时针旋转90°为例，样式实现如下：

  .img-rotate-90 {
    /* 把旋转基准点设置在元素左上角 */
    transform-origin: top left;
    transform: rotate(90deg);
    /* 左外边距设置为图片原始宽度，把旋转后的元素推到预期位置 */
    margin-left: 300px; /* 替换为图片实际原始宽度 */
  }
  

注意：CSS transform 属性的所有变换效果都不会改变元素在文档流中的原始占位，纯CSS实现方案需要手动给旋转元素预留足够的布局空间，否则会出现和周边文档流元素重叠的问题。

不建议通过给根节点加滚动条的方式处理溢出，这种方式只是让溢出内容可滚动，没有从根源解决布局占位不匹配的问题，还会出现非预期的滚动条占位。

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