html图片横向反转

使用CSS transform属性

原理

通过CSS的transform: scaleX(-1)属性，将图片在水平方向（X轴）缩放为-1倍，实现镜像翻转。

<style>
  .flip-horizontal {
    transform: scaleX(-1);
  }
</style>
``` | 定义CSS类`.flip-horizontal`，设置水平缩放为-1 | 图片左右反转，宽度不变 |
| ```html
<img src="image.jpg" class="flip-horizontal" />
``` | 给图片添加`.flip-horizontal`类 | 图片显示为横向反转效果 |
---
 方法二：使用JavaScript动态修改样式
# 原理
通过JavaScript操作图片的`style`属性，直接设置`transform: scaleX(-1)`。
| 代码示例 | 说明 | 效果 |
|---------|------|------|
| ```html
<script>
  document.querySelector('.js-flip').style.transform = 'scaleX(-1)';
</script>
``` | 选择类名为`.js-flip`的图片，设置`transform`属性 | 图片左右反转，与CSS效果一致 |
| ```html
<img src="image.jpg" class="js-flip" />
``` | 给图片添加`.js-flip`类 | 需配合JS代码生效 |
---
 注意事项
1. 图片尺寸：反转后图片宽度不变，但布局可能受影响，需注意容器宽度。
2. 兼容性：`transform`属性在IE9+及以上浏览器支持。
3. 性能：CSS方法性能更优，推荐优先使用。
---
 相关问题与解答
# 问题1：如何同时实现水平和垂直反转？
解答：  
在CSS中，可组合使用`scaleX(-1)`和`scaleY(-1)`，或简写为`scale(-1)`。
```css
.flip-both {
  transform: scale(-1); / 同时水平+垂直反转 /
}

问题2：反转后图片周围出现空白怎么办？

解答：
可能是父元素宽度未自适应，可调整父元素样式：

.container {
  width: fit-content; / 自动适应内容宽度 /
}

或给图片添加display: block;避免基线对齐导致的间隙