perspective必须加在翻转容器（如.card）上，值600–1200px；transform-style: preserve-3d需加在.card或.card-inner上；.front和.back均需设backface-visibility: hidden；移动端须用js切换is-flipped类，且.back初始transform应为rotatey(180deg)。
perspective 必须写在直接父容器上
很多人把 perspective 加在 body 或最外层 wrapper 上，结果 rotateY(180deg) 没反应——因为浏览器只对“有 perspective 的直接子元素”启用 3D 渲染上下文。正确做法是把它加在翻转动作发生的容器（比如 .card）上，值建议选 600–1200px；太小（如 200px）会畸变，太大（如 5000px）几乎看不出翻转感。
transform-style: preserve-3d 不能漏，也不能放错位置
这个声明必须加在执行旋转的元素上（通常是 .card 或中间包裹层 .card-inner），不是加在 .front 或 .back 上，也不是加在 body 上。漏掉它，所有子元素退化为 2D 平面，翻转后背面直接消失或卡在 90°。Safari 15.4 之前尤其敏感，嵌套深了容易失效，可补 -webkit-transform-style: preserve-3d。
backface-visibility: hidden 要分别加在正反面上
只给 .card 加没用，必须给 .front 和 .back 都加 backface-visibility: hidden。不加的话，翻转到 90° 左右时两面会同时显示，文字镜像重叠，iOS 微信 WebView 和旧版 Chrome 更明显。顺带一提：某些安卓 WebView 对 -webkit-backface-visibility: hidden 更认，建议双写。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
移动端点击翻转必须用 JS 切类，别依赖 :hover
:hover 在手机上基本不可靠，:active 松手就回弹。可靠方案是：tabindex="0" 让 .card 可聚焦，JS 绑定 click 事件，用 element.classList.toggle('is-flipped') 切换类名。CSS 写 .card.is-flipped { transform: rotateY(180deg); }。连点多次易错乱，可在 transitionstart 临时加 pointer-events: none 防抖。
最容易被忽略的是背面初始状态：.back 必须预设 transform: rotateY(180deg)，否则 hover 或点击触发时会先“弹一下”再翻——这不是动画问题，是起始姿态错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
