index.html如何实现图片翻转效果？

用transform: rotateY(180deg)可实现图片水平镜像翻转，需配合perspective和transform-style: preserve-3d生效；rotate(180deg)仅为平面旋转，非镜像效果。

用 CSS transform: rotateY 实现图片水平翻转

直接给 <img> 元素加 transform: rotateY(180deg) 就能镜像翻转，但要注意它只是视觉变换，不改变图片原始方向或 DOM 结构。

常见错误是只写 rotate(180deg) —— 这是平面旋转，看起来像倒扣，不是左右镜像；必须用 rotateY（绕 Y 轴）才能实现真正“照镜子”效果。

• 需要配合 transform-style: preserve-3d 和容器设置 perspective 才能让 3D 变换生效（尤其在旧版 Safari 中）
• 如果图片被父容器设置了 overflow: hidden，翻转后可能被裁切，建议给容器加 transform: translateZ(0) 触发硬件加速并修复渲染边界
• 想点击切换翻转状态？用 class 切换比内联 style 更可控：

  .flipped { transform: rotateY(180deg); }

hover 时自动翻转图片的写法

这是最常用交互场景，关键在于过渡动画要加在原始元素上，而不是 hover 伪类里。

错误写法：img:hover { transform: rotateY(180deg); transition: transform 0.3s; } —— transition 放在 hover 里会导致首次悬停无动画。

立即学习“前端免费学习笔记（深入）”；

• 正确做法：默认状态就声明 transition，hover 时只改 transform

  img { transition: transform 0.3s ease; }<br>img:hover { transform: rotateY(180deg); }

• 如果图片有宽高约束（比如 max-width: 100%），翻转后可能因盒模型计算偏差出现轻微抖动，可加 backface-visibility: hidden 消除
• 移动端需额外加 cursor: pointer，否则部分 iOS Safari 不触发 hover

JavaScript 控制翻转状态时要注意什么

用 JS 切换 class 是最稳妥方式，避免直接操作 style.transform 引发内联样式优先级冲突。

典型错误：多次调用 element.style.transform = 'rotateY(180deg)' 后再设回 'none'，结果发现没还原——因为 'none' 并非重置 transform 的合法值。

• 重置 transform 应该用空字符串：element.style.transform = ''
• 更推荐统一用 class：element.classList.toggle('flipped')，CSS 里定义好对应状态
• 如果页面有多个图片共用同一翻转逻辑，别用 document.querySelector('img') 硬编码，改用事件委托或 data 属性标识：<img data-flip="true">

IE 和旧版 Android 浏览器兼容性处理

IE10+ 支持 transform: rotateY，但需要 -ms- 前缀；Android 4.4 及更早版本只支持 2D 变换，rotateY 会完全失效。

如果必须兼容这些环境，可用 scaleX(-1) 作为降级方案：它不是严格意义上的 3D 翻转，但视觉效果一致，且所有浏览器都支持。

• 注意 scaleX(-1) 会让文字也镜像，若图片含文字（如 logo），需对内部文字单独加 scaleX(-1) 补偿
• 不要混用前缀和无前缀写法，CSS 会按顺序覆盖，建议用 Autoprefixer 自动处理
• 测试时重点看是否触发了 layout thrashing：频繁切换翻转状态又读取 offsetWidth 等属性，容易卡顿

实际翻转效果是否自然，往往取决于 perspective 值和 transition timing function 的微调，而不是变换本身。很多人卡在加了 rotateY 却没效果，其实只是忘了给父容器设 perspective 或漏了 transform-style。