如何实现内容更新时卡片翻转？避免文字随卡片旋转

要解决翻转时文字随之旋转的问题，我们需要通过嵌套结构分离卡片容器和文字内容，在卡片翻转时反向旋转文字以保持其直立状态。以下是完整的实现方案：

1. 修改HTML结构 #

为每个倒计时盒子添加翻转容器，并将文字放入独立的内部元素中：

<div class="container">
  <img src="images/bg-stars.svg" alt="none" id="stars">
  <div id="midsec">
    <p>We're launching soon</p>
    <span class="name" style="grid-row: 3; grid-column: 1;">Days</span>
    <span class="name" style=" grid-row: 3; grid-column: 2;">Hours</span>
    <span class="name" style=" grid-row: 3; grid-column: 3;">Minutes</span>
    <span class="name" style=" grid-row: 3; grid-column: 4;">Seconds</span>
    
    <div class="flip-container" id="days-container" style="grid-column: 1;">
      <div class="top-box">
        <span id="days"></span>
      </div>
    </div>
    <div class="flip-container" id="hours-container" style="grid-column: 2;">
      <div class="top-box">
        <span id="hours"></span>
      </div>
    </div>
    <div class="flip-container" id="mins-container" style="grid-column: 3;">
      <div class="top-box">
        <span id="mins"></span>
      </div>
    </div>
    <div class="flip-container" id="seconds-container" style="grid-column: 4;">
      <div class="top-box">
        <span id="seconds"></span>
      </div>
    </div>
  </div>
  <img src="images/pattern-hills.svg" alt="none" id="hills">
</div>

2. 更新CSS样式 #

添加翻转动画效果，确保卡片翻转时文字反向旋转保持直立：

.container {
  background-color: #211D2E;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#midsec {
  display: grid;
  position: absolute;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr 3fr 1fr;
  top: 104px;
  width: 131vh;
  height: 52%;
  margin-left: auto;
  margin-right: auto;
  gap: 20px;
}

.container p {
  color: #FFFEFF;
  font-family: hat;
  font-weight: 700;
  font-size: xx-large;
  letter-spacing: 2px;
  position: relative;
  display: grid;
  grid-column-start: 2;
  grid-column-end: 4;
  align-items: center;
  justify-content: center;
}

.container span {
  font-family: hat;
  color: hsl(237, 18%, 59%);
}

#stars {
  margin-left: 5%;
  max-width: 73%;
}

#hills {
  max-width: 100%;
  height: 34vh;
  margin-top: 5%;
}

.flip-container {
  width: 100%;
  perspective: 1500px; /* 营造3D翻转深度 */
}

.top-box {
  width: 100%;
  display: grid;
  background-color: #34364F;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  font-size: 21vh;
  color: #FA5D86 !important;
  letter-spacing: 3px;
  transform-style: preserve-3d;
}

.top-box span {
  display: block;
  backface-visibility: hidden; /* 防止翻转时文字穿透显示 */
}

/* 卡片翻转动画 */
@keyframes flipBox {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(180deg); }
  100% { transform: rotateX(0deg); }
}

/* 文字反向旋转动画，保持直立 */
@keyframes flipText {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(-180deg); }
  100% { transform: rotateX(0deg); }
}

.flip-container.flipping .top-box {
  animation: flipBox 0.6s ease-in-out;
}

.flip-container.flipping .top-box span {
  animation: flipText 0.6s ease-in-out;
}

.name {
  display: grid;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 11px;
}

3. 添加JavaScript逻辑 #

实现倒计时功能，并在数值变化时触发翻转动画：

// 设置倒计时目标日期（可根据需求修改）
const targetDate = new Date('2024-12-31T23:59:59').getTime();

// 记录上一次的倒计时数值，用于检测变化
let prevDays = 0;
let prevHours = 0;
let prevMins = 0;
let prevSeconds = 0;

function updateCountdown() {
  const now = new Date().getTime();
  const distance = targetDate - now;

  // 计算当前倒计时数值
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const mins = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // 检测数值变化并触发翻转
  if (seconds !== prevSeconds) {
    flipElement('seconds-container');
    document.getElementById('seconds').textContent = seconds.toString().padStart(2, '0');
    prevSeconds = seconds;
  }
  if (mins !== prevMins) {
    flipElement('mins-container');
    document.getElementById('mins').textContent = mins.toString().padStart(2, '0');
    prevMins = mins;
  }
  if (hours !== prevHours) {
    flipElement('hours-container');
    document.getElementById('hours').textContent = hours.toString().padStart(2, '0');
    prevHours = hours;
  }
  if (days !== prevDays) {
    flipElement('days-container');
    document.getElementById('days').textContent = days.toString().padStart(2, '0');
    prevDays = days;
  }
}

function flipElement(id) {
  const container = document.getElementById(id);
  container.classList.add('flipping');
  // 动画结束后移除类，以便下次触发
  setTimeout(() => {
    container.classList.remove('flipping');
  }, 600);
}

// 初始化倒计时
updateCountdown();
// 每秒更新一次
setInterval(updateCountdown, 1000);

核心原理说明 #

• 嵌套结构：通过flip-container和内部的top-box+span分离卡片容器与文字内容。
• 反向旋转：卡片翻转时，文字同步反向旋转180度，抵消容器的旋转效果，保持文字直立。
• 触发逻辑：通过对比前后数值变化，仅在倒计时数值更新时触发翻转动画，避免不必要的重复动画。

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