用CSS transform实现图片翻转效果的关键条件是：必须使用双面容器（front/back）嵌套于设perspective的card父容器中，配合transform-style: preserve-3d、backface-visibility: hidden及绝对定位重叠，仅对img单独旋转无效。
用 CSS transform 实现图片翻转效果的关键条件
纯 HTML 无法实现翻转动画，必须配合 CSS 的 transform 和 transition，且需要双面容器（正面图 + 背面文字）嵌套在同一个父容器中。常见错误是只给 <img> 单独加 transform: rotateY(180deg)，结果只是把图倒过来，背面还是空白。
正确做法是用一个 <div class="card"> 包住两个子元素：<div class="front"> 放 <img>，<div class="back"> 放文字，再通过 transform-style: preserve-3d 让翻转有空间感。
- 父容器必须设
perspective（比如perspective: 1000px），否则翻转像平面切换，没立体感 - 前后两面都得设
position: absolute并重叠定位，否则翻转时会错位 -
backface-visibility: hidden必须加在前后两面上，否则翻转中途会看到背面内容透过来
HTML 结构怎么写才不踩坑
结构顺序和 class 命名直接影响 CSS 选择器是否生效。别用 <img> 直接做翻转主体，它没法承载背面内容；也别把文字塞进 <img> 的 alt 属性——那根本不会显示。
标准结构如下：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<div class="card"> <div class="front"><img src="photo.jpg" alt="正面"></div> <div class="back"><p>这里是背面文字</p></div> </div>
-
class="card"是唯一需要设perspective的地方，别漏了 -
front和back必须同级、同尺寸、同定位（比如都top: 0; left: 0; width: 100%; height: 100%） - 如果图片宽高不固定，建议给
.card设明确宽高（如width: 300px; height: 200px），避免布局抖动
触发翻转的三种可靠方式
翻转动作本身靠 CSS 类切换或伪类，但不同触发方式兼容性和行为差异很大。
- 用
:hover最简单：鼠标悬停时加.card:hover .front { transform: rotateY(180deg); }，但移动端无效 - 用 JavaScript 切换 class 更可控：点击时给
.card加is-flipped类，CSS 写.card.is-flipped .front { transform: rotateY(180deg); }，同时记得同步控制.back的旋转（rotateY(0)） - 别用
onclick="this.classList.toggle('flipped')"直接写在 HTML 里——可维护性差，且容易和其它 JS 冲突
注意：transform: rotateY(180deg) 要加在 .front 上，同时 .back 得设 transform: rotateY(-180deg) 或初始为 rotateY(180deg) 再翻回，否则文字会镜像反向。
移动端适配和性能细节
在 iOS Safari 或安卓 Chrome 上，单纯用 transform 可能卡顿或闪屏，尤其图片大时。
- 强制开启硬件加速：给
.front和.back加transform: translateZ(0)或will-change: transform - 图片务必压缩并设
loading="lazy"，否则翻转瞬间加载未完成的图会导致跳变 - 不要在
.card上用overflow: hidden——某些安卓浏览器下会裁掉翻转过程中的半边内容 - 如果需支持微信内置浏览器，避开
perspective值过小（< 500px），否则翻转角度异常
最易被忽略的是背面文字的字体渲染：翻转后若文字模糊，大概率是没给 .back 设 -webkit-backface-visibility: hidden（旧版 Safari 必须显式声明）。
