卡片180°翻转故障：X轴偏移与重复翻转问题排查（HTML/CSS/JS）

问题1：翻转时X轴偏移，无法绕自身中心旋转 #

原因 #

1. .memory-card的宽度计算语法错误：calc(25%-10px)缺少空格，CSS中calc运算符号前后必须加空格，否则浏览器无法正确解析，导致卡片宽度异常。
2. 卡片容器宽高（原calc(14vmin - 2px)）与内部图片宽高（19vmin）不匹配，图片超出容器范围，旋转时视觉上出现偏移。
3. 内部图片未居中定位，导致旋转中心偏离卡片实际中心。

修复方案 #

• 统一卡片容器和内部图片的尺寸为19vmin，避免尺寸不匹配问题。
• 设置图片自适应容器大小，添加object-fit: cover保证图片填充容器且不变形。
• 修正calc语法（本次直接采用固定尺寸替代，避免计算误差）。

问题2：点击恢复初始状态时，部分卡片重复翻转2-3次 #

原因 #

1. 卡片的active缩放动画与flip翻转动画的transition属性叠加，点击时的缩放会干扰状态切换逻辑。
2. 未限制翻转过程中的重复点击，快速点击会多次触发class.toggle，导致动画重复执行。

修复方案 #

• 添加点击锁，在翻转动画执行期间（0.5s）禁止重复点击，避免多次触发状态切换。
• 明确transition的作用属性，分离不同状态的动画逻辑。

修改后的JavaScript代码 #

const cards = document.querySelectorAll(".memory-card")

function flip() {
  // 动画过程中禁止重复点击
  if (this.classList.contains('flipping')) return;
  this.classList.add('flipping');
  this.classList.toggle("flip");
  // 动画结束后移除锁定类
  setTimeout(() => {
    this.classList.remove('flipping');
  }, 500); // 对应transition的0.5s时长
}

cards.forEach((c) => c.addEventListener("click", flip))

修改后的CSS代码 #

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  background: linear-gradient(50deg, rgb(198, 193, 188), rgb(153, 145, 137), rgb(109, 101, 94));
  background-size: 100%;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
  position: fixed;
}

.wrapper {
  display: grid;
  grid-template: 15vmin/ 20vmin 20vmin 20vmin 20vmin;
  justify-content: center;
  align-items: center;
  padding-top: 8vmin;
  margin-left: -2vmin;
  perspective: 1000px;
  grid-gap: 8vmin 4vmin;
}

.memory-card {
  width: 19vmin;
  height: 19vmin;
  position: relative;
  transform: scale(1);
  transform-style: preserve-3d;
  margin: 2vw;
  border-radius: 23%;
  box-shadow: 1vmin 1vmin 1vmin 2px silver;
  transition: transform .5s;
}

.memory-card.flip {
  transform: rotateY(180deg);
}

.memory-card:active {
  transform: scale(0.94);
  transition: transform .05s;
}

.front, .end {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  backface-visibility: hidden;
  object-fit: cover;
}

.front {
  transform: rotateY(180deg);
}

修改后的HTML代码（结构无需调整） #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset=UTF-8>
  <meta http-equiv="X-UA-Compatible">
  <meta name="viewport" content="width = device-width, initial-scale = 1.0">
  <link rel="stylesheet" href="index.css">
  <title> Memory Game </title>
</head>

<body>
  <section class="wrapper">
    <div class="memory-card">
      <img src="https://images.unsplash.com/photo-1484589065579-248aad0d8b13?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=918&q=80" alt="space" class="front">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/1600px-A_black_image.jpg?20201103073518" alt="a black card" class="end">
    </div>

    <div class="memory-card">
      <img src="https://images.unsplash.com/photo-1516339901601-2e1b62dc0c45?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=671&q=80" alt="space" class="front">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/1600px-A_black_image.jpg?20201103073518" alt="a black card" class="end">
    </div>

    <div class="memory-card">
      <img src="https://images.unsplash.com/photo-1444703686981-a3abbc4d4fe3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt="space" class="front">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/49/A_black_image.jpg/1600px-A_black_image.jpg?20201103073518" alt="a black card" class="end">
    </div>
  </section>
  <script src="index.js"></script>
</body>

</html>

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