如何为重叠切换的section区块添加翻转缩放过渡动画

当前直接修改zIndex实现切换的逻辑存在两个核心问题：一是zIndex属于离散的层叠属性，本身不会触发CSS过渡；二是没有将动画绑定到可过渡的transform属性上，自然会出现生硬跳变的效果。
要实现目标的纵向翻转+缩放的切入效果，按照以下步骤调整即可：

• 补充3D效果基础配置：在父容器添加透视属性，避免翻转效果扁平无立体感；给区块添加transform-style: preserve-3d保证3D变换的继承。
• 定义状态对应的变换参数：把动画的初始态、激活态用CSS类区分，利用CSS的过渡属性自动补全中间的动画帧，不需要手动写逐帧关键帧。
• 调整切换逻辑：把原来直接修改行内样式zIndex的操作，替换为给目标区块切换激活类，让过渡自动触发。

修正后的完整代码 #

1. 补充基础样式

/* 包裹区块的父容器，提供3D透视参照 */
.page-wrapper {
  position: relative;
  perspective: 1000px;
  height: 100vh;
}
section {
  /* 统一过渡时长、缓动曲线，匹配目标动画的动效质感 */
  transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1);
  transform-style: preserve-3d;
  position: absolute;
  /* 区块默认隐藏状态：缩放为0、沿X轴旋转90度，为翻转切入的初始帧 */
  opacity: 0;
  transform: scale(0) rotateX(90deg);
  pointer-events: none;
}
/* 区块激活显示状态 */
section.active {
  opacity: 1;
  transform: scale(1) rotateX(0deg);
  pointer-events: auto;
  z-index: 10;
}

2. 调整HTML结构

<div class="page-wrapper">
  <section
    style="
      width: 60vh;
      height: 60vh;
      background-color: #144ddc;
      left: 300px;
      top: 50px;
    "
    class="page1 home active"
    id="home"
  ></section>

  <section
    style="
      width: 60vh;
      height: 60vh;
      background-color: #dcc114;
      left: 300px;
      top: 50px;
    "
    class="page2 about"
    id="about"
  ></section>
</div>

<button onclick="forPageOne()">For Page One</button>
<button onclick="forPageTwo()">For Page Two</button>

3. 简化JS切换逻辑

const allSections = document.querySelectorAll('section');
function switchSection(targetId) {
  allSections.forEach(sec => sec.classList.remove('active'));
  document.getElementById(targetId).classList.add('active');
}
function forPageOne() {
  switchSection('home');
}
function forPageTwo() {
  switchSection('about');
}

注意事项 #

• 不要给zIndex设置过渡属性，该属性为离散层叠值，过渡它没有实际视觉意义，只需要保证激活状态的区块在动画开始时处于高层即可。
• 父容器的perspective属性不能省略，否则沿X轴的翻转会呈现平面旋转效果，没有立体纵深感。
• 原代码中的绝对定位区块需要保证最近的父容器设置了position: relative，否则定位参照点会偏移到文档根节点，出现位置错乱。

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