卡片翻转效果必须设置 transform-style: preserve-3d，否则 rotateY(180deg) 失效；还需配合 backface-visibility: hidden、position: absolute、transition 和移动端 click 事件控制。
卡片翻转效果必须用 transform-style: preserve-3d
不加这句，transform: rotateY(180deg) 会失效或显示错乱——浏览器默认把子元素压平到同一平面，翻转后背面直接看不见。它不是可选样式，是 3D 翻转的硬性前提。
常见错误：只给翻转容器设 perspective，却漏掉父级的 transform-style: preserve-3d；或者加在了错误层级（比如加在卡片内容上，而不是卡片容器本身）。
- 必须加在包裹正面和背面两个面的最外层容器上（通常是
.card） -
perspective建议设在更上层（如.card-container），值在1000px左右比较自然 - 正面和背面都得设
position: absolute且尺寸一致，否则翻转时会偏移
用 :hover 触发翻转时，transition 要写在变换的元素上
不是写在 :hover 伪类里，而是写在初始状态的卡片面上。否则鼠标移入瞬间会闪一下，再开始动画。
典型错误写法：.card:hover .card-face { transform: rotateY(180deg); } 却没给 .card-face 设 transition —— 动画根本不会发生。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给正面和背面都加上：
transition: transform 0.6s ease-in-out; - 翻转动作靠改变父容器的
transform（比如.card.is-flipped .card-front），或更推荐用.card:hover .card-front直接控制 - 避免对
opacity或visibility做过渡——它们不触发硬件加速，卡顿明显
背面文字看不清？检查 backface-visibility 和颜色对比
即使翻转正常，背面也可能“透明”或“发虚”，大概率是 backface-visibility: hidden 没设，或背面背景色太浅、字体太细。
这个属性不是锦上添花，是防止背面在翻转中途“镜像显示”的关键。Chrome/Firefox 默认开启 3D 渲染，但 Safari 对此更敏感。
- 正面和背面都要加：
backface-visibility: hidden; - 背面务必设明确背景色（如
background: #2c3e50;）和足够对比度的文字色（如color: #ecf0f1;） - 别依赖
z-index控制前后——3D 翻转中 z-index 失效，全靠transform: translateZ()或 DOM 顺序
移动端点击翻转要用 JavaScript 切换 class
:hover 在手机上基本无效，点一下就翻、再点一下翻回来，得靠 JS 控制 class。但别用 onclick 写在 HTML 里，也别监听 touchstart——有 300ms 延迟，体验卡顿。
正确做法是监听 click 事件（现代移动浏览器已取消延迟），并用 classList.toggle() 切换状态。
- HTML 中卡片加
tabindex="0"，支持键盘焦点与空格/回车翻转 - JS 只需一句：
cardElement.addEventListener('click', () => cardElement.classList.toggle('is-flipped')); - CSS 对应写
.card.is-flipped .card-front { transform: rotateY(180deg); }和.card.is-flipped .card-back { transform: rotateY(0deg); }
transform-style 和 backface-visibility 这两个属性上——它们不像 color 或 margin 那样直观，出问题也不报错，只是“不动”或“看不见”。动手前先确认这两行有没有，能省掉大半调试时间。 
