如何用同一按钮实现点击翻转图片、再次点击还原的效果

你现有代码的问题是每次点击都会强制给图片设置scaleX(-1)的翻转属性，没有做状态判断切换，所以只能实现第一次翻转，后续点击都不会还原。

方案1：用类切换实现（更推荐） #

这种方式代码更简洁，后续要加过渡动画等扩展需求也更方便。
首先在CSS中定义翻转状态的类：

.flipped {
  transform: scaleX(-1);
  /* 要平滑翻转效果可以加下面这行 */
  transition: transform 0.3s ease;
}

然后修改JS代码为切换类即可：

$('.button').on("click", function (){ 
  $('#image').toggleClass('flipped');
})

方案2：直接通过JS判断状态修改属性 #

如果不想额外加CSS类，可以直接判断当前图片的transform状态做切换：

$('.button').on("click", function (){ 
  const $targetImg = $('#image');
  const currentTransform = $targetImg.css('transform');
  // 浏览器获取transform属性会返回矩阵格式，scaleX(-1)对应矩阵为matrix(-1, 0, 0, 1, 0, 0)
  if (currentTransform.includes('matrix(-1') || currentTransform === 'scaleX(-1)') {
    $targetImg.css("transform","scaleX(1)");
  } else {
    $targetImg.css("transform","scaleX(-1)");
  }
})

内容的提问来源于stack exchange，提问作者Ibraheem Zulfiqar