当前位置：首页 > 行业动态 > 正文

html翻图片

admin
行业动态
2025-04-28
2809

使用CSS的transform属性，如scaleX(-1)实现水平翻转，配合过渡效果可添加动画

实现原理与方式

HTML 本身无法直接实现图片翻转效果，需结合 CSS 或 JavaScript 完成，主要通过 CSS 的 transform 属性或 JavaScript 操作 DOM 样式来实现。

html翻图片第1张

CSS 实现图片翻转

水平翻转（左右翻转）

.flip-horizontal {
  transform: scaleX(-1); / X轴缩放为-1，实现水平翻转 /
}

垂直翻转（上下翻转）

.flip-vertical {
  transform: scaleY(-1); / Y轴缩放为-1，实现垂直翻转 /
}

同时实现水平+垂直翻转

.flip-both {
  transform: scale(-1, -1); / X、Y轴均缩放为-1 /
}

JavaScript 动态控制翻转

示例代码（点击按钮触发翻转）

<img id="target" src="image.jpg" />
<button onclick="flipImage()">翻转图片</button>
<script>
  function flipImage() {
    const img = document.getElementById('target');
    img.style.transform = img.style.transform === 'scale(-1, -1)' ? 'none' : 'scale(-1, -1)';
  }
</script>

常见问题与效果对比表

翻转类型	CSS 写法	视觉效果	适用场景
水平翻转	`transform: scaleX(-1)`	左右镜像	快速镜像处理
垂直翻转	`transform: scaleY(-1)`	上下颠倒	特殊排版需求
完全翻转	`transform: scale(-1, -1)`	上下左右均反转	动态切换正反面效果
仅旋转180度	`transform: rotate(180deg)`	保持原方向，仅整体旋转	避免镜像变形的场景