为何切换翻转轴时卡片会先朝相反方向转动？

问题根源 #

当前实现的核心问题是：每次执行单轴翻转时，会完全覆盖transform属性，丢失另一个轴的旋转状态。比如先点击"up"让卡片沿X轴翻转180°后，再点击"left"时，代码仅设置rotateY(180deg)，直接抹掉了之前的X轴旋转，导致视觉上出现不符合预期的翻转行为。

修正方案 #

1. 修改JavaScript逻辑

每次更新旋转角度后，同时应用X轴和Y轴的旋转，保留两个轴的状态：

let upBtn = document.getElementById("top");
let dnBtn = document.getElementById("down");
let lftBtn = document.getElementById("left");
let rtBtn = document.getElementById("right");
let resetBtn = document.getElementById("reset");
let card = document.querySelector(".card");

let degreesX = 0;
let degreesY = 0;

function toggleDir(dir) {
  switch (dir) {
    case "up":
      degreesX += 180;
      break;
    case "down":
      degreesX -= 180;
      break;
    case "right":
      degreesY -= 180;
      break;
    case "left":
      degreesY += 180;
      break;
    case "reset":
      degreesX = 0;
      degreesY = 0;
      break;
  }
  // 同时应用双轴旋转，保留之前的翻转状态
  card.style.transform = `rotateX(${degreesX}deg) rotateY(${degreesY}deg)`;
}

2. 修正HTML的ID重复问题

原代码中reset按钮与left按钮共用id="left"，会导致DOM元素获取异常，需修改reset按钮的ID：

<body>
  <div class="container">
    <div class="card">
      <div class="front"></div>
      <div class="back"></div>
    </div>
  </div>

  <button id="top" onclick="toggleDir('up')">top</button>
  <button id="down" onclick="toggleDir('down')">down</button>
  <button id="left" onclick="toggleDir('left')">left</button>
  <button id="right" onclick="toggleDir('right')">right</button>
  <button id="reset" onclick="toggleDir('reset')">reset</button>
</body>

3. 可选优化：简化角度数值

如果不想让角度值无限累加，可以用取模运算保持角度在0-360范围内，效果完全一致：

// 以up操作为例，其他方向同理
degreesX = (degreesX + 180) % 360;

效果验证 #

修改后，先点击"up"再点击"left"，卡片会先沿X轴向上翻转，再沿Y轴向左翻转，完全符合预期；任意组合方向的翻转操作都能保留之前的旋转状态，不会出现异常回退。

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