必须用transform-style: preserve-3d开启3d上下文，设perspective创建景深，正反面用absolute定位且backface-visibility: hidden，transition仅作用于transform，移动端需js切换is-flipped类触发rotatey(180deg)。
用 CSS transform: rotateY() 实现图片翻转，别碰 transition 顺序问题
翻转动画卡顿、只动一半、或点一下就消失——八成是 transition 没写对属性，或者没触发硬件加速。翻转本质是 3D 变换，必须给容器加 transform-style: preserve-3d，否则子元素会扁平化，后侧永远看不见。
实操要点：
-
container（卡片外层）设perspective: 1000px，值太小会夸张变形，太大则看不出深度 -
card（翻转主体）必须设transform-style: preserve-3d - 前后两面（
.front和.back）都要加position: absolute+backface-visibility: hidden，否则翻到背面时会透出正面内容 -
transition只写transform 0.6s ease，不要写成all 0.6s，否则可能意外触发布局重排
HTML 结构必须用双层包裹，不能只靠一个 <img> 标签
单个 <img> 标签无法同时展示正反两面，也挂不上 .back 内容。常见错误是试图用伪元素或 JS 动态替换 src，结果交互僵硬、SEO 不友好、响应式失效。
正确结构示例（精简版）：
<div class="card-container">
<div class="card">
<div class="front"><img src="a.jpg" alt="正面"></div>
<div class="back"><p>这是背面文字</p></div>
</div>
</div>
注意：.front 和 .back 必须同级、等尺寸、且都设 width/height: 100%，否则翻转错位。
hover 触发翻转没问题，但移动端需要加 click 事件支持
纯 :hover 在 iOS 和 Android 上基本不生效（尤其 Safari），用户点了没反应，不是代码错，是浏览器策略。必须补 JS 绑定点击切换类名。
轻量处理方式：
- 给
.card初始不加翻转，用类名如is-flipped控制状态 - CSS 中写
.card.is-flipped { transform: rotateY(180deg); } - JS 里用
element.classList.toggle('is-flipped')，别用setAttribute全量重写 - 为避免连点多次错乱，可加
pointer-events: none在过渡中临时禁用点击（配合transitionend事件恢复）
图片模糊、边缘锯齿？检查 will-change 和设备像素比
翻转过程中图片突然变糊，大概率是 GPU 加速没真正启用，或高 DPI 屏幕下未适配。Chrome 和 Safari 对 transform 的优化依赖渲染层提升，但不会自动做。
关键补丁：
- 给
.card加will-change: transform（仅在必要时加，别滥用） - 确保图片本身分辨率够高；若用背景图，设
background-size: cover+background-position: center - 在 retina 屏上，
transform: scale(0.9999)有时能强制走 subpixel 渲染，但更稳的方式是让图片宽高为偶数像素 - 避免在
.front或.back上设border-radius或box-shadow，这些会打断合成层，导致翻转掉帧
翻转动画看着简单，实际卡点全在层叠上下文和 GPU 渲染层的隐式切换上。哪怕改一个 overflow: hidden 都可能让背面彻底消失，调试时优先查 DevTools 的 Layers 面板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
