动态翻转卡片按钮必须同时设置perspective（父容器）、transform-style: preserve-3d（卡片容器）和backface-visibility: hidden（正反面），缺一即失效；perspective须设于共同父容器，值推荐800px–1200px，背面需预设rotateY(180deg)，移动端须用JS切换class而非hover。
直接上结论：动态翻转卡片按钮不是加个 rotateY 就能动起来的，漏掉 perspective、transform-style: preserve-3d 或 backface-visibility: hidden 中任意一项，都会导致背面消失、文字镜像、闪烁或纯 2D 翻转。
perspective 必须设在父容器上，不能写在翻转主体里
很多人把 perspective: 1000px 直接加在 .card 或 button 上，结果翻转像左右对称镜像，毫无立体感——因为 perspective 定义的是观察者到 z=0 平面的距离，它必须作用于子元素的**共同父容器**，为前后两面提供共享的 3D 渲染上下文。
-
.card-container { perspective: 1000px; }是正确写法；值推荐 800px–1200px，太小（如 300px）会让背面缩成一条线，太大（如 3000px）几乎无透视感 -
.card { perspective: 1000px; }是无效写法，Chrome 和 Safari 都会忽略，退化为平面旋转 - 别用
transform: perspective(1000px)——这不是合法语法，perspective是独立 CSS 属性，不能塞进transform - 如果父容器有
overflow: hidden或任何transform（哪怕只是translateZ(0)），可能截断 3D 渲染层，导致翻转卡顿或半截消失
transform-style: preserve-3d 和 backface-visibility: hidden 缺一不可
没加 transform-style: preserve-3d，.card 的子元素（即 .front 和 .back）会被浏览器“拍平”成 2D，rotateY(180deg) 只是左右翻面，不是真实翻转；不加 backface-visibility: hidden，翻转到 90° 左右时正反面会同时显示、文字镜像、内容重叠甚至闪烁。
-
transform-style: preserve-3d必须加在包裹前后两面的**直接父容器**上（通常是 .card），加在 .card-container 或 .front/.back 上都无效 -
backface-visibility: hidden必须分别加在 .front 和 .back 上——加在 .card 上无效，该属性只对直系子元素生效 - 旧版 Safari（15.4 之前）需要补
-webkit-backface-visibility: hidden，否则背面可能完全不渲染 - 移动端 WebView（如微信内置）对该属性支持不稳定，建议统一加
-webkit-前缀兜底
背面必须预设 rotateY(180deg)，翻转只动容器
翻转动画的本质是让正面转过去、背面转过来。如果只在 hover 或点击时给 .card 加 rotateY(180deg)，而背面没初始化朝后，翻转后看到的就是正面的镜像，或者背面文字反着读。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
.card-back { transform: rotateY(180deg); }是必须的初始状态（可省略.card-front { transform: rotateY(0); }） - hover 触发时只动 .card：
.card-container:hover .card { transform: rotateY(180deg); } - 移动端不能依赖 :hover，必须用 JS 切换类名（如
.card.is-flipped），且推荐用element.classList.toggle('is-flipped')，别用setAttribute全量重写 - 为防连点错乱，可在 transition 过程中临时加
pointer-events: none，并在transitionend事件中恢复
transition 只写 transform，别碰 width/height/top/left
翻转卡顿、掉帧、只动一半——八成是 transition 写错了属性，或者意外触发了布局重排（reflow）。3D 翻转必须只动 transform 和 opacity，其他属性（如 top、left、width）会强制重排，严重拖慢性能。
- 正确写法：
transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); - 错误写法：
transition: all 0.6s;或transition: left 0.6s;，可能意外触发布局计算 - 图片模糊、边缘锯齿？检查是否启用 GPU 加速：给 .card 加
will-change: transform（仅必要时加，别滥用） - 确保 .front 和 .back 同级、等尺寸、都设
width: 100%; height: 100%，否则翻转会错位
最容易被忽略的一点：HTML 结构必须严格分层，不能靠 JS 切换显隐来模拟翻转——那样既没硬件加速，也丢失 3D 深度感。真正的翻转，是前后两面共存于同一个 3D 空间，靠旋转和视角变化切换可见性，而不是“隐藏一个、显示另一个”。
