标签页与卡片翻转不能简单叠加，因 display/visibility 切换会销毁 DOM、破坏 3D 上下文；正确做法是保持单个 .card 结构，JS 动态替换 .card-front/.card-back 内容并切换 is-flipped 类触发 rotateY 过渡，同时注意 Safari 兼容性细节。
不能直接用标签页切换（display 或 visibility）触发卡片翻转动画——翻转是 3D 变换，依赖固定 DOM 结构和持续存在的前后两面；而标签页切换若销毁/隐藏面板，会打断 3D 上下文，导致翻转失效或错位。
为什么标签页 + 卡片翻转不能简单叠加
常见错误是把每个标签页当做一个独立卡片，点击切换时用 display: none 隐藏其他页、显示当前页。这会导致：
-
.card-back在非激活页中被移出渲染树，backface-visibility: hidden失效 - 翻转容器（如
.card-inner）失去子元素，transform-style: preserve-3d退化为 2D - 动画只在首次加载时跑一次，后续切换无过渡，或 Safari 中直接卡死
正确做法：标签页控制卡片的“内容替换”，不控制显隐
让所有标签页内容始终存在于同一个翻转容器内，通过 JS 替换正面/背面的 innerHTML，而不是切换面板。关键点：
- 结构上只有一个
.card容器，内部固定两个面：.card-front和.card-back - 每个标签页对应一组数据（标题、表单字段、描述），存为 JS 对象数组
- 点击页签时，不操作
display，而是调用函数更新.card-front和.card-back的内容，并立即触发翻转 - 翻转动作仍由
.card-inner的transform: rotateY(180deg)控制，transition 写在它上面
移动端点击翻转 + 标签页切换必须用 class 切换
:hover 在手机上不可靠，:active 无法保持状态，纯 CSS 无法响应标签页逻辑。必须用 JS：
立即学习“前端免费学习笔记（深入）”；
- 给每个页签（
role="tab"）绑定click事件，调用switchTab(index) -
switchTab()做两件事：更新两面 DOM + 切换.card的is-flipped类 - CSS 中写：
.card.is-flipped .card-inner { transform: rotateY(180deg); }，不要用!important - 为防连点错乱，可在
transitionstart事件里临时加pointer-events: none，结束后恢复
容易被忽略的兼容性细节
这套组合在 Safari 和微信 WebView 中最容易出问题，不是代码写错，而是漏了这几处：
-
.card-front和.card-back都要写-webkit-backface-visibility: hidden，不能只写标准版 -
.card的perspective必须设在父容器（如.tabs-container）上，且值别超 2000px，否则 iOS Safari 渲染失真 - 如果用 Flex/Grid 布局包裹
.card，Safari 可能忽略preserve-3d，可尝试给.card加display: inline-block强制重绘 - 别在翻转过程中动态插入
iframe或video，它们会触发重排，打断 3D 层级——先翻转完成，再用setTimeout(() => {...}, 600)延迟加载
