如何实现Bootstrap页面初始整体旋转 滚动到断点带动画回正效果

Bootstrap本身没有内置该滚动触发的旋转效果，结合轻量的原生CSS+JS即可实现，兼容Bootstrap 4/5全版本，完整可运行代码如下：

1. 基础逻辑说明 #

我们把所有页面内容套在一个外层容器中，初始给容器添加旋转样式，监听页面滚动距离，当滚动到预设的断点值时，给外层容器添加回正类，通过CSS过渡实现平滑动画。

2. 完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>滚动旋转回正效果</title>
  <!-- 引入Bootstrap CSS资源，4/5版本均兼容 -->
  <link rel="stylesheet" href="你的bootstrap.css路径">
  <style>
    /* 外层容器核心样式 */
    #page-wrapper {
      /* 初始旋转角度，可自定义，负数为向左旋转 */
      transform: rotate(10deg);
      /* 旋转基点为页面顶部中心，可根据需求调整为left top/right top等 */
      transform-origin: top center;
      /* 动画时长0.6s，缓动效果，可自定义时长 */
      transition: transform 0.6s ease;
      /* 避免旋转后内容溢出出现横向滚动条 */
      overflow-x: hidden;
      min-height: 100vh;
    }
    /* 滚动到断点后添加的回正样式类 */
    #page-wrapper.rotate-normal {
      transform: rotate(0deg);
    }
    /* 顶部占位区高度即滚动触发断点，需和JS里的scrollBreakpoint数值保持一致 */
    .top-placeholder {
      height: 300px;
    }
  </style>
</head>
<body>
  <div id="page-wrapper">
    <!-- 顶部占位区，滚动过该区域就触发回正效果 -->
    <div class="top-placeholder d-flex align-items-center justify-content-center">
      <h1 class="display-4">向下滚动查看效果</h1>
    </div>
    <!-- 以下为你的正常Bootstrap页面内容 -->
    <div class="container py-5">
      <div class="row g-4">
        <div class="col-md-4">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">卡片1</h5>
              <p class="card-text">示例内容示例内容示例内容示例内容示例内容</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">卡片2</h5>
              <p class="card-text">示例内容示例内容示例内容示例内容示例内容</p>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card h-100">
            <div class="card-body">
              <h5 class="card-title">卡片3</h5>
              <p class="card-text">示例内容示例内容示例内容示例内容示例内容</p>
            </div>
          </div>
        </div>
        <div class="col-12 mt-5">
          <p class="lead">回正后的正文内容，可读性大幅提升</p>
          <p>大量正文内容大量正文内容大量正文内容大量正文内容大量正文内容大量正文内容</p>
          <!-- 可自行添加更多内容拉长页面，方便测试滚动效果 -->
          <div style="height: 1000px;"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- 引入Bootstrap JS资源，对应你使用的版本即可 -->
  <script src="你的bootstrap.bundle.min.js路径"></script>
  <script>
    const pageWrapper = document.getElementById('page-wrapper');
    // 滚动触发断点，需和上面.top-placeholder的height数值保持一致，单位像素
    const scrollBreakpoint = 300;

    // 监听滚动事件
    window.addEventListener('scroll', () => {
      const currentScroll = window.scrollY || document.documentElement.scrollTop;
      if (currentScroll >= scrollBreakpoint) {
        pageWrapper.classList.add('rotate-normal');
      } else {
        // 向上滚动回到断点以上时，恢复旋转状态，不需要的话可以删掉这个else分支
        pageWrapper.classList.remove('rotate-normal');
      }
    });
  </script>
</body>
</html>

3. 常用自定义调整项 #

• 初始旋转角度：修改#page-wrapper的rotate(10deg)参数即可
• 滚动触发断点：同时修改.top-placeholder的height和JS中scrollBreakpoint的数值，两者保持一致
• 动画速度：修改transition: transform 0.6s ease中的0.6s，数值越大动画越慢
• 回正后保持状态：如果不需要向上滚动时恢复旋转，删掉JS中的else分支即可

4. 兼容性说明 #

该方案兼容所有现代浏览器，不需要额外引入第三方插件，代码体积小不会影响页面加载性能。如果需要兼容老旧浏览器，给transform属性添加对应浏览器前缀即可。

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