闪卡3D翻转动画导致文本镜像错乱的问题求助

问题描述 #

开发文本转闪卡网站时，实现3D翻转动画后出现文本镜像错乱的情况，调整CSS后仍无法解决。

问题原因 #

你的CSS代码中同时对.card和.card-inner应用了rotateY(180deg)翻转，导致双重翻转，这就是文本镜像错乱的核心原因。另外，.card.flipped .card-front的多余样式也会干扰正常的翻转逻辑。

修复方案 #

1. 仅保留.card-inner的翻转效果，移除.card.flipped上的rotateY(180deg)样式
2. 删除.card.flipped .card-front的冗余样式，让卡片正面保持默认的rotateY(0deg)，背面保持rotateY(180deg)，通过翻转内层容器实现卡片翻面

修改后的完整代码 #

HTML #

<div class="grid" id="flashcards"></div>

JavaScript #

function flipAll() {
  const cards = document.querySelectorAll('.card');

  cards.forEach(card => {
    card.addEventListener('click', () => {
      card.classList.toggle('flipped');
    });
  });
}

const flashcards = document.getElementById("flashcards");
flashcards.innerHTML = "";

var terms = ["a", "b", "c"];
var definitions = ["aa", "bb", "cc"];

for (let i = 0; i < terms.length; i++) {
  const card = document.createElement("div");
  card.classList.add("card");

  const cardInner = document.createElement("div");
  cardInner.classList.add("card-inner");
  card.appendChild(cardInner);

  const cardFront = document.createElement("div");
  cardFront.classList.add("card-front");
  cardFront.innerHTML = `<h2>${terms[i]}</h2>`;
  cardInner.appendChild(cardFront);

  const cardBack = document.createElement("div");
  cardBack.classList.add("card-back");
  cardBack.innerHTML = `<p>${definitions[i]}</p>`;
  cardInner.appendChild(cardBack);

  card.addEventListener("click", function() {
    card.classList.toggle("flipped");
  });

  flashcards.appendChild(card);
}

CSS #

.card {
  width: 400px;
  height: 250px;
  background-color: #252525;
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s;
  margin: 50px auto;
  position: relative;
}

.card:hover {
  transform: scale(1.05);
  background-color: #2e2e2e;
}

.card .card-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.3s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.card .card-front,
.card .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card .card-front {
  transform: rotateY(0deg);
}

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

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

效果说明 #

修改后，点击卡片时仅内层.card-inner执行180度翻转，正面和背面的初始角度保持正确，不会因双重翻转导致文本镜像。同时保留了卡片hover时的缩放效果，不影响原有交互体验。

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