JavaScript 图片翻转：使用 HTMLImageElement 实现图片翻转效果

要在 JavaScript 中实现图片翻转，您可以使用 HTMLImageElement 对象的 CSS 属性 'transform' 来实现。以下是一个示例代码：

HTML 部分：

<img id='myImage' src='image.jpg' alt='My Image'>

JavaScript 部分：

// 获取图片元素
var image = document.getElementById('myImage');

// 翻转图片
function flipImage() {
  image.style.transform = 'scaleX(-1)';
}

// 恢复图片原始状态
function resetImage() {
  image.style.transform = 'scaleX(1)';
}

在上面的代码中，我们首先使用 getElementById 方法获取了一个 id 为 'myImage' 的图片元素，并将其赋值给变量 image。

然后，我们定义了两个函数：flipImage 用于翻转图片，resetImage 用于恢复图片的原始状态。

在 flipImage 函数中，我们将图片的 transform 属性设置为 'scaleX(-1)'，这会将图片沿着水平方向翻转。

在 resetImage 函数中，我们将图片的 transform 属性设置为 'scaleX(1)'，将图片恢复到原始状态。

您可以在需要的时候调用这两个函数来实现图片的翻转和恢复。例如，您可以在按钮的点击事件中调用这些函数：

document.getElementById('flipButton').addEventListener('click', flipImage);
document.getElementById('resetButton').addEventListener('click', resetImage);

在上面的代码中，我们假设有两个按钮，一个用于翻转图片，另一个用于恢复图片原始状态。通过 addEventListener 方法，我们为这两个按钮添加了点击事件监听器，当按钮被点击时，相应的函数将被调用。

请注意，上面的代码只是一个简单的示例，实际使用时您可能需要根据您的具体需求进行适当的调整。