如何固定Header尺寸并实现标题切换时的上下翻转动画？

核心思路 #

要同时满足「Header尺寸固定」和「标题上下翻转动画」两个需求，核心做法是给Header设置固定高度，用绝对定位让所有标题重叠在同一空间，再通过CSS 3D变换+过渡动画实现翻转效果，配合JS控制切换时序。

代码实现 #

HTML结构 #

<header class="site-header">
  <div class="title-wrapper">
    <h2 class="page-title active">第一个标题</h2>
    <h2 class="page-title">第二个标题</h2>
    <h2 class="page-title">第三个标题</h2>
  </div>
</header>

CSS样式 #

/* 固定Header高度，彻底避免内容切换导致尺寸变化 */
.site-header {
  height: 140px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 可根据原网站风格调整背景、内边距等 */
  background: #ffffff;
}

.title-wrapper {
  position: relative;
  width: 100%;
  text-align: center;
}

/* 所有标题绝对定位，重叠在同一位置 */
.page-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
  /* 初始状态：隐藏并处于向上翻转状态 */
  opacity: 0;
  transform: rotateX(90deg);
  transform-origin: top center;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* 当前显示的标题：恢复正常状态 */
.page-title.active {
  position: relative; /* 让当前标题占据正常流空间，不影响布局稳定性 */
  opacity: 1;
  transform: rotateX(0deg);
}

/* 退出的标题：向下翻转隐藏 */
.page-title.exit {
  opacity: 0;
  transform: rotateX(-90deg);
}

JavaScript逻辑 #

const titles = document.querySelectorAll('.page-title');
let currentIdx = 0;

function rotateTitle() {
  // 给当前标题添加退出类，触发向下翻转动画
  const currentTitle = titles[currentIdx];
  currentTitle.classList.remove('active');
  currentTitle.classList.add('exit');

  // 计算下一个标题的索引
  currentIdx = (currentIdx + 1) % titles.length;
  const nextTitle = titles[currentIdx];

  // 等待退出动画完成后，重置状态并激活下一个标题
  setTimeout(() => {
    currentTitle.classList.remove('exit');
    nextTitle.classList.add('active');
  }, 500); // 时长必须和CSS transition的时长保持一致
}

// 初始化第一个标题的显示状态
titles[currentIdx].classList.add('active');

// 设置自动切换间隔（比如3秒切换一次，可按需调整）
setInterval(rotateTitle, 3000);

关键细节解释 #

• 固定Header高度：通过height属性硬设高度，配合overflow:hidden，防止标题翻转时内容超出Header范围，彻底锁死Header尺寸。
• 3D翻转效果：transform-origin: top center让标题以顶部为轴翻转，rotateX(90deg)实现向上翻折隐藏，rotateX(-90deg)实现向下翻折退出，模拟真实翻页的视觉效果。
• 动画时序控制：用setTimeout等待退出动画结束后再激活下一个标题，避免两个标题的动画重叠，保证视觉流畅度。

推荐学习方向 #

• CSS 3D变换：重点掌握transform的3D属性（rotateX/Y、transform-origin），理解立体空间的变换逻辑，能自定义不同角度的翻转效果。
• CSS过渡与动画：深入学习transition的缓动函数、时长控制，以及@keyframes的高级动画写法，实现更复杂的动画效果。
• DOM动画配合：练习用JS触发CSS类切换，理解动画时序与DOM操作的配合技巧，比如如何监听transitionend事件来替代固定时长的setTimeout。

内容的提问来源于stack exchange，提问作者Elton Grivith D Souza