背单词总记混：写了个翻转卡片，点一下看释义，词库存在本地

背单词 App 不是弹广告就是要注册，词库还是它定的，我想记自己攒的生词反而没地方放。干脆做个网页：左边列单词，点一下卡片翻过去看释义，词库存在浏览器里，关了再开还在。这种"翻牌"效果看着花，其实核心就一层 CSS，不用任何动画库。

一、翻转靠 CSS 3D

不用 JS 算正反面，纯 CSS 翻转最稳。关键是父容器 preserve-3d、正反两面 backface-visibility: hidden：

.card { width: 240px; height: 150px; position: relative;
        transform-style: preserve-3d; transition: transform .4s; cursor: pointer; }
.card.flipped { transform: rotateY(180deg); }
.card .face { position: absolute; inset: 0; backface-visibility: hidden;
              display: flex; align-items: center; justify-content: center;
              border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.card .back { transform: rotateY(180deg); background: #eef3fb; }

backface-visibility: hidden 让"背对屏幕那一面"不渲染，所以卡片翻到 180 度时正面自动藏起、背面显示出来。inset:0 让正反两层叠在同一位置，翻转时才像同一张卡在转。transform-style: preserve-3d 是必选项——没它子元素会被压平，翻转就失效。

二、点击翻转只切 class

JS 只负责切 flipped，动画完全交给 CSS：

card.addEventListener('click', () => card.classList.toggle('flipped'));

一个 toggle 搞定，正反来回点都行。重点别在 JS 里手写"当前是正面还是反面"的状态变量——class 本身就是状态，多写一套反而容易和视图对不上。

三、词库存本地

单词和释义是一组对象，存 localStorage，录入和抽取都围着它转：

let words = JSON.parse(localStorage.getItem('words') || '[]');
// words = [{ word:'abandon', meaning:'v. 抛弃' }, ...]
function addWord(w, m) {
  if (!w) return;
  words.push({ word: w, meaning: m });
  localStorage.setItem('words', JSON.stringify(words));
  showNext();
}
function showNext() {
  const cur = words[Math.floor(Math.random() * words.length)];
  front.textContent = cur.word;
  back.textContent = cur.meaning;
  card.classList.remove('flipped');   // 复位到正面
}

showNext 随机抽一个展示，并 remove('flipped') 复位——不然上一张停在背面，下一张直接显示答案就泄底了。空词库时 words.length 为 0，Math.random()*0 是 0，取 words[0] 是 undefined，所以抽之前先判断有没有词，没有就提示"先加词"。

四、几种记忆卡片做法对比

小结

单词背诵卡用 CSS 3D 翻转：父容器 transform-style: preserve-3d、正反两面 backface-visibility: hidden、背面预转 rotateY(180deg)，翻到背后正面自动藏起。点击只 classList.toggle('flipped')，状态交给 class，别另写布尔变量。词库存 localStorage，展示时随机抽并 remove('flipped') 复位到正面，避免下一张直接泄答案；空词库要先拦住再提示加词。