HTML页面顺时针旋转90度后实现正常滚动的解决方案求助

直接旋转页面内容会导致滚动条方向与实际操作需求不匹配，以下是可行的解决方案：

核心思路 #

通过调整容器尺寸适配旋转后的视口，配合变换属性修正内容位置，让滚动容器的滚动逻辑与用户操作方向对齐。

实现代码 #

HTML结构

<div class="rotation-wrapper">
  <div class="content">
    <!-- 你的多行表格内容放在这里 -->
  </div>
</div>

CSS样式

/* 重置默认样式，避免多余边距和滚动条 */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* 滚动容器：适配旋转后的视口尺寸 */
.rotation-wrapper {
  width: 100vh;
  height: 100vw;
  overflow: auto;
  /* 顺时针旋转90度，并修正位置使其完全显示在视口内 */
  transform: rotate(90deg) translateY(-100%);
  transform-origin: top left;
  /* 可选：优化滚动体验 */
  scrollbar-width: thin;
}

/* 内容容器：按原页面需求设置尺寸 */
.content {
  width: 100vw;
  min-height: 100vh;
  padding: 1rem;
  box-sizing: border-box;
}

关键说明 #

• rotation-wrapper的宽高设置为100vh和100vw，对应旋转后用户看到的竖屏视口尺寸；
• rotate(90deg)让内容顺时针旋转90度，配合transform-origin: top left和translateY(-100%)修正旋转后的偏移，确保内容完全落在视口内；
• 外层容器设置overflow: auto，此时滚动条的方向会对应用户实际操作的竖屏滚动需求，鼠标滚轮和拖动滚动条的行为都会符合预期。

如果表格内容本身有固定宽度，可调整.content的width值为表格实际宽度，确保内容完整显示。

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