可通过 CSS transform 属性实现 HTML5 图片翻转：一、scaleX(-1)水平翻转；二、scaleY(-1)垂直翻转；三、rotate(180deg)旋转翻转；四、结合：hover 实现悬停翻转；五、rotateY(180deg)3D 水平翻转。
如果您希望在网页中实现 HTML5 图片的翻转效果，可以通过 CSS 的 transform 属性配合 rotate 或 scaleX 函数来完成。以下是实现图片翻转的具体方法：
一、使用 transform: scaleX(-1)水平翻转图片
该方法通过缩放 X 轴方向为 -1，使图片沿垂直中线镜像翻转，常用于创建左右对称的视觉效果。
1、在 HTML 中插入 img 标签，并为其添加自定义类名，例如 class=”flip-horizontal”。
2、在 CSS 中定义该类，设置 transform: scaleX(-1)及 transform-origin 以确保翻转中心准确。
立即学习 “ 前端免费学习笔记（深入）”；
3、为避免影响父容器布局，建议同时设置 display: inline-block 或添加overflow: hidden 限制溢出。
二、使用 transform: scaleY(-1)垂直翻转图片
该方法通过缩放 Y 轴方向为 -1，使图片沿水平中线镜像翻转，适用于倒置图像或特殊排版需求。
1、为图片元素添加类名，例如 class=”flip-vertical”。
2、在 CSS 中为该类设置 transform: scaleY(-1)，并指定 transform-origin 为 center 以保持翻转锚点居中。
3、若图片存在文字或图标内容，需注意垂直翻转后可能影响可读性，应避免在含文本的图片上直接使用此方法。
三、使用 transform: rotate(180deg)实现 180 度旋转翻转
该方法使图片绕其中心点顺时针旋转 180 度，视觉上呈现上下左右完全颠倒的效果，等效于两次镜像叠加。
1、为 img 标签添加类名，例如 class=”rotate-180″。
2、在 CSS 中设置 transform: rotate(180deg)，无需额外指定 origin，默认以中心为旋转原点。
3、若需动画过渡效果，可追加 transition: transform 0.3s ease 属性，使翻转过程平滑呈现。
四、结合：hover 伪类实现鼠标悬停翻转
通过 CSS 伪类触发 transform 变化，可在用户交互时动态展示翻转效果，提升页面响应性。
1、为图片设置基础样式，包括宽高、display 及初始 transform 值（如 transform: scaleX(1)）。
2、在：hover 选择器中覆盖 transform 属性，例如 transform: scaleX(-1)或 rotateY(180deg)。
3、若需 3D 翻转效果，可启用 transform-style: preserve-3d 并配合 perspective 属性，此时必须将父容器设为 transform-style: preserve-3d。
五、使用 transform: rotateY(180deg)实现 3D 水平翻转
该方法利用 CSS 3D 变换模拟真实卡片翻转，使图片沿 Y 轴旋转，呈现正面到背面的立体切换感。
1、为图片外层包裹一个 div 容器，并设置 perspective 属性（如 perspective: 1000px）。
2、为图片本身设置 transform-style: preserve-3d 及 transform: rotateY(0deg)作为初始状态。
3、在：hover 状态下将图片 transform 改为 rotateY(180deg)，需确保父容器已启用 preserve-3d 且无 overflow: hidden 遮挡。
