卡片翻转动画由css3的transform、perspective和backface-visibility协同实现，非html5；结构错误或缺失关键样式会导致失效、闪烁或镜像。
直接说结论：卡片翻转动画不是靠 HTML5 实现的，而是靠 CSS3 的 transform、perspective 和 backface-visibility 三个属性协同完成；index.html 只负责提供语义化结构，写错结构或漏掉任意一个关键样式，动画就会失效、闪烁或文字镜像。
为什么 hover 时卡片只动一半或根本不动
这是 Safari（尤其 iOS 15.4 之前）和部分旧版 Chrome 最常见的表现，本质是 3D 渲染上下文被中断。核心原因有三个：
-
transform-style: preserve-3d没加在正确父级上——必须加在触发翻转的容器（如.card），而不是它的父容器或子元素 - 漏写
-webkit-perspective和-webkit-transform前缀，Safari 会直接忽略 3D 变换 -
.card是 flex 或 grid 子项时，某些版本 Safari 会强制降级为 2D 渲染；临时解法是给它加display: inline-block
验证方式：打开开发者工具，在 .card 元素上手动勾选 transform: rotateY(180deg)，如果此时能动，说明是触发逻辑或前缀问题；如果仍不动，大概率是 preserve-3d 缺失或层级错位。
点击翻转比 hover 更难搞？关键在类名切换时机
用 JavaScript 控制翻转看似自由，但容易陷入两个坑：
- 直接写
element.style.transform = 'rotateY(180deg)'—— 这会覆盖 CSS 中定义的transition，导致无动画、生硬跳变 - 用
classList.toggle('flipped')却没在 CSS 中正确定义.card.flipped .card-face.back的旋转状态，结果翻过去就卡住不回来 - 移动端 click 事件在 iOS 上有 300ms 延迟，且
:hover不可靠；应改用touchstart+preventDefault()，或统一监听click并加cursor: pointer触发硬件加速
推荐写法：document.querySelector('.card').addEventListener('click', e => e.currentTarget.classList.toggle('is-flipped'))，对应 CSS 写 .card.is-flipped .card-inner { transform: rotateY(180deg); }，其中 .card-inner 是包裹前后两面的中间容器，避免样式污染。
背面内容显示异常或文字反向
这不是动画问题，而是结构+定位没对齐：
-
.front和.back必须同级、都设position: absolute; top: 0; left: 0; width: 100%; height: 100%，否则会错位或挤压 -
.back必须初始就带transform: rotateY(180deg)，不是等翻转时才加——否则第一帧会看到正面内容“拉伸”到背面位置再翻 - 漏掉任一
backface-visibility: hidden（前后两面都要加），翻转过程中会透出背面内容的镜像，文字左右颠倒 - 如果用了
font-feature-settings或自定义字体，某些字体在 rotateY 后会触发重排，造成轻微抖动；可加will-change: transform但仅限现代浏览器，旧 Safari 反而更卡
最稳妥的调试顺序：先关掉所有 transition，手动加 transform: rotateY(180deg) 到 .card，确认正背面是否完全重叠、无偏移、无镜像；再开 transition，最后加交互逻辑。
真正难的不是写出来，而是让同一套代码在 Chrome、Firefox、Safari（桌面+iOS）、Edge 都不闪、不卡、不偏移——perspective 值、前缀顺序、preserve-3d 层级、backface-visibility 作用域，四个点里错一个，整张卡片就废掉一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
