用 transform: rotatey(180deg) 可实现图片水平翻转，但需父容器设 perspective 和 transform-style: preserve-3d，并为图片添加 backface-visibility: hidden；更轻量方案是 scalex(-1)，无需 3d 上下文且兼容性好。
用 transform: rotateY() 实现图片水平翻转
HTML5 本身不提供“翻转图片”的原生标签或 API，实际依赖 CSS3 的 transform。最常用的是 rotateY(180deg)，让图片绕垂直轴旋转半圈，视觉上就是镜像翻转。
关键点在于：必须配合 transform-style: preserve-3d 和容器设置 perspective 才能让 3D 变换生效；否则 rotateY 在部分浏览器（如旧版 Safari）会退化为无效果或平面旋转。
- 容器需设
perspective: 1000px（值越小翻转感越强，但太小会导致变形） - 图片父元素加
transform-style: preserve-3d - 图片自身用
transform: rotateY(180deg) - 别忘了加
backface-visibility: hidden防止翻转后背面内容意外显示
.flip-container {
perspective: 1000px;
}
.flip-card {
transform-style: preserve-3d;
transition: transform 0.6s ease;
}
.flip-card.flipped img {
transform: rotateY(180deg);
}
.flip-card img {
backface-visibility: hidden;
}纯 CSS 实现 hover 翻转，无需 JS
很多场景只要鼠标悬停就翻转，完全不用写 JavaScript。核心是利用 :hover 切换类名或直接控制 transform，但要注意触发元素层级和过渡属性位置。
常见错误：把 transition 写在 img 上，而不是写在被变换的容器（如 .flip-card）上——因为 rotateY 是作用于容器的，动画属性必须和变换在同一元素。
立即学习“前端免费学习笔记（深入）”；
- 确保
transition加在应用transform的那个元素上 - 避免对
img直接设rotateY，应包裹一层div或用伪元素承载 - 移动端需额外加
cursor: pointer或监听touchstart才能触发:hover
<div class="flip-container">
<div class="flip-card">
@@##@@
</div>
</div>
<p><style>
.flip-card {
transition: transform 0.4s ease;
}
.flip-container:hover .flip-card {
transform: rotateY(180deg);
}
</style>
scaleX(-1) 更轻量的水平镜像方案
如果只是要左右镜像（比如自拍预览翻转），scaleX(-1) 比 rotateY 更简单、性能更好，且不需要 3D 上下文。它直接沿 Y 轴缩放 -1 倍，图像内容被水平翻转，文字也会反向——这点常被忽略。
若图片含文字或图标，需单独对文字再 scaleX(-1) 还原，否则会倒着显示。另外，scaleX(-1) 不影响布局流，不会改变元素占位尺寸。
- 适用于头像、按钮图标、UI 元素镜像等轻量需求
- 不支持平滑 3D 翻转动画，只有“瞬间镜像”效果
- IE9+ 支持，无需前缀；但旧 Android WebView 需加
-webkit-transform
img.mirror {
transform: scaleX(-1);
}
/* 若含文字，需额外处理 */
.mirror-text {
transform: scaleX(-1);
}JS 控制翻转状态时注意 DOM 重排与事件绑定
用 JavaScript 切换翻转状态（比如点击切换正反面），最容易出问题的是：状态没同步、多次点击导致动画叠加、或翻转后事件区域错位。
根本原因：翻转后元素视觉位置变了，但 DOM 布局坐标未变，click 仍按原始区域响应。尤其当用 rotateY + preserve-3d 时，背面元素默认不可交互，必须显式设 pointer-events: auto。
- 用 class 切换而非内联
style.transform，便于 CSS 控制动画节奏 - 翻转完成后再启用背面操作，可用
transitionend事件监听 - 若背面有按钮，需加
pointer-events: auto，否则点击无效 - 避免在动画进行中连续触发，可加
isFlipping标志位锁住
const card = document.querySelector('.flip-card');
let isFlipping = false;
<p>card.addEventListener('click', () => {
if (isFlipping) return;
isFlipping = true;
card.classList.toggle('flipped');</p><p>card.addEventListener('transitionend', () => {
isFlipping = false;
}, { once: true });
});CSS 翻转看似简单，真正上线时容易卡在浏览器兼容细节、事件穿透、动画中断这几个点上。尤其是 backface-visibility 和 pointer-events 的组合，不测真机很难发现。
