如何在 HTML 中添加翻转图像

在 HTML 中，我们可以通过 CSS transform 属性来实现图像的翻转效果。

以水平翻转为例：

<img src="image.jpg" alt="My Image" class="flip-horizontal">

上面的代码中，我们使用了 img 标签来插入图像，并添加了一个 class 名称为 flip-horizontal 。

接下来，我们在样式表中为这个 class 添加 CSS 样式：

.flip-horizontal {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

上面的代码是水平翻转的实现方式，其中 scaleX(-1) 这个属性值是关键，它表示将元素水平翻转。

垂直翻转同理，只需将 scaleX(-1) 改为 scaleY(-1) 即可：

.flip-vertical {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
}

综上，通过添加对应的 class 名称和 CSS 样式，我们就能在 HTML 中实现图像的翻转效果啦！

参考链接：CSS3 transform property