HTML5不支持3D翻转，需用CSS3的transform、preserve-3d、perspective实现：两个img分别设front/back，容器设relative和perspective，子元素absolute定位并rotateY(180deg)，加transition和backface-visibility。
HTML5 本身不直接提供“3D翻转”功能，真正起作用的是 CSS3 的 transform（特别是 rotateY）配合 transform-style: preserve-3d 和恰当的 perspective。纯 HTML5 标签无法实现，必须靠 CSS3 3D 变换 + 结构组织。
图片3D翻转必须用 CSS3 transform，不是 HTML5 新标签
很多人误以为 或某个 HTML5 标签能直接翻转图片——其实不能。 要自己写 WebGL 或 2D 绘图逻辑，成本高且不必要。最轻量、兼容性好、语义清晰的做法是：用两个
- 必须给父容器设
transform-style: preserve-3d，否则子元素的 3D 变换会被扁平化 -
perspective要加在父容器或其祖先上（不能只加在翻转元素自身），值太小会畸变，太大则翻转感弱（常用1000px） - 翻转动作靠
transform: rotateY(180deg)实现，0° 是正面，180° 是背面完全朝前 - 背面图片需额外加
transform: rotateY(180deg)，否则它会背向用户、不可见
HTML 结构要分 front/back 两层，不能只用一张图
单张图片无法同时显示正反面。必须用两个元素分别承载正面图和背面图，并通过定位重叠。常见错误是把两张图并列写，没做绝对定位，导致翻转时错位或堆叠异常。
- 外层容器设
position: relative，宽高明确（如width: 300px; height: 200px;） -
front和back都设position: absolute; top: 0; left: 0; width: 100%; height: 100% -
back必须加transform: rotateY(180deg)，否则翻转后看到的是黑屏或空白 - 可加
backface-visibility: hidden到两层，避免翻转过程中看到背面内容透出
@@##@@ @@##@@
触发翻转要用 :hover 或 JS 切换 class，别硬写 inline transform
直接在 HTML 里写 style="transform: rotateY(180deg)" 只能静态展示背面，无法交互。实际要用状态切换：
立即学习“前端免费学习笔记（深入）”；
- :hover 最简单：
.card:hover .card-inner { transform: rotateY(180deg); }（注意：.card-inner 是包裹 front/back 的内层） - JS 控制更灵活：用
element.classList.toggle('is-flipped')，CSS 写.is-flipped { transform: rotateY(180deg); } - 务必加
transition: transform 0.6s ease到被翻转的容器，否则是瞬切，没有动画效果 - 不要对
移动端要注意 touch 事件和 backface-visibility 兼容性
在 iOS Safari 或部分安卓浏览器中，backface-visibility: hidden 有时会导致文字模糊或渲染异常；而纯 :hover 在触摸设备上不触发。
- 移动端建议用 JS 监听
click或touchstart来 toggle 翻转状态 - 如果发现背面图片模糊，尝试给
.back加-webkit-backface-visibility: hidden和transform: translateZ(0)强制硬件加速 - 某些旧版 Android（4.4 以下）不支持
preserve-3d，此时翻转会失效，降级方案是用 opacity 切换（非 3D） - 不要依赖
perspective值过小（如100px），在高 DPR 屏幕上容易出现锯齿
真正的难点不在“怎么写出来”，而在于 perspective 层级、transform-style 作用域、backface-visibility 的组合时机——这三者只要漏掉一个，翻转就会看起来像抽搐、消失或错位。
