实现Bootstrap 4卡片动画：点击后旋转并全屏居中显示

嘿，你已经搞定了旋转的核心逻辑！接下来我们把全屏扩展和居中定位的动画跟现有效果整合起来，用CSS过渡+类切换就能轻松实现，不用写复杂的额外JS逻辑，下面是具体步骤：

1. 定义CSS动画样式（核心部分） #

首先给卡片添加基础过渡属性，确保所有视觉变化都能平滑过渡；然后把旋转、全屏尺寸、居中定位的样式都整合到flipper类里：

/* 基础可扩展卡片样式 */
.card-expandable {
  width: 400px;
  height: 350px;
  transition: all 0.6s ease-in-out; /* 统一过渡动画，时间和缓动可按需调整 */
  margin: 1rem;
}

/* 触发动画后的复合样式：旋转+全屏+居中 */
.card-expandable.flipper {
  transform: translate(-50%, -50%) rotateY(180deg); /* 先居中再旋转，顺序不能乱 */
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999; /* 确保卡片在所有元素最上层 */
  margin: 0; /* 清除原有margin避免影响居中 */
}

/* 可选：旋转后避免卡片内容反向 */
.card-expandable.flipper .card-body {
  transform: rotateY(180deg);
}

2. 适配Bootstrap的HTML结构 #

给你的Bootstrap卡片加上自定义的card-expandable类，保证结构兼容：

<div class="container">
  <div class="row">
    <!-- 单个可扩展卡片 -->
    <div class="col">
      <div id="kidCard" class="card card-expandable">
        <div class="card-body">
          <h5 class="card-title">示例卡片</h5>
          <p class="card-text">点击按钮触发旋转+全屏动画</p>
          <button id="enlarge" class="btn btn-primary">展开全屏</button>
        </div>
      </div>
    </div>
  </div>
</div>

3. 复用现有JS逻辑 #

你原来的点击事件代码完全可以直接用，因为我们把所有动画效果都整合到了flipper类中，切换类就会同时触发所有动画：

$('#enlarge').on('click', function() { 
  $('#kidCard').toggleClass("flipper"); 
});

实用优化提示 #

• 如果是多个卡片，别用ID选择器，改成类选择器更灵活：

  $('.btn-enlarge').on('click', function() { 
    $(this).closest('.card-expandable').toggleClass("flipper"); 
  });
  

• 可以调整过渡时间（比如0.8s）或缓动函数（比如cubic-bezier(0.4, 0, 0.2, 1)）来优化动画质感；
• 全屏后可以加个关闭按钮，逻辑和打开按钮一致，点击移除flipper类即可；
• 如果需要区分卡片的“正面”和“背面”，可以参考CSS 3D翻转的两面结构，但如果只是单纯旋转+全屏，上面的代码完全够用。

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