如何用JavaScript实现卡片翻转动画？我的代码为何不生效

核心问题分析 #

现有代码已搭建基础结构，但缺少3D变换的关键配置，导致翻转效果无法正常生效：

• 卡片容器.card未开启3D空间保留，子元素的3D变换无法被正确渲染
• 正面/背面元素未占满卡片区域，易出现显示错位
• 翻转类的过渡属性与父容器不一致，动画流畅度受影响

修复后的完整代码 #

HTML（无需修改） #

<div class="contain">
  <header>
    <h1>Card Game</h1>
    <button type="button" id="reset">Reset</button>
  </header>
  <div class="game"></div>
</div>

CSS（关键修改已标注） #

.card {
  border: 1px solid black;
  width: 100px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-color: #444;
  transition: transform 0.8s;
  position: relative;
  /* 新增：开启3D空间保留，让子元素3D变换生效 */
  transform-style: preserve-3d;
}

.card:hover {
  background-color: #777;
}

.card-flip {
  /* 统一过渡时长，与父元素保持一致提升流畅度 */
  transition: transform 0.8s ease-in;
  transform: rotateY(180deg);
}

.back,
.front {
  position: absolute;
  backface-visibility: hidden;
  /* 新增：让正面/背面填满整个卡片 */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.front {
  /* 确保正面默认显示，背景色与卡片统一 */
  background-color: #444;
}

.back {
  transform: rotateY(180deg);
  /* 背面设置背景色，避免透明问题 */
  background-color: #444;
}

JavaScript（优化细节） #

const game = document.querySelector(".game");
const nums = [];

// 修复循环变量全局声明问题，新增数组重置逻辑
function generateNumber() {
  nums.length = 0;
  for (let i = 1; i <= 16; i++) {
    nums.push(Math.floor(Math.random() * 10));
  }
}

function displayNumbers() {
  game.innerHTML = ''; // 生成前清空容器，避免重复渲染
  generateNumber();
  for (let i of nums) {
    const card = `<div class="card" onclick="flipCard(this)">
                    <div class="front">
                      <img src="/images/qmark.jpg" width="50px">
                    </div>
                    <div class="back">
                      <h2>${i}</h2>
                    </div>
                  </div>`;
    game.insertAdjacentHTML("beforeend", card);
  }
}

displayNumbers();

function flipCard(elm) {
  elm.classList.toggle("card-flip");
}

// 可选：添加重置按钮功能
document.getElementById('reset').addEventListener('click', displayNumbers);

关键知识点说明 #

1. transform-style: preserve-3d：必须给父元素设置该属性，才能让子元素的3D变换（如rotateY）在3D空间中正确渲染，否则子元素会被扁平化到父元素平面。
2. backface-visibility: hidden：隐藏元素背面，确保翻转时正面和背面不会同时显示。
3. 正面/背面占满卡片：通过width:100%;height:100%配合flex布局，确保内容居中且覆盖整个卡片区域，避免翻转时出现空白或错位。

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