可通过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遮挡。
