如何实现图片翻转且保持原位置不动？

问题核心在于transform属性会被完全覆盖：你原本给img设置了transform:translatex(-50%)实现居中，添加flip类时，新的transform:scaleX(-1)会替换掉原有transform规则，导致居中效果丢失，图片因此移位。

下面提供两种可行的解决办法：

方法一：合并transform变换 #

将居中的平移效果和翻转效果写在同一个transform规则里，避免属性被覆盖：

.flip{
  /* 保留原居中逻辑，叠加翻转效果 */
  transform: translatex(-50%) scaleX(-1);
}

.wrap{
  position:relative;
  width:50%;
  height:100px;
  background:darkorange;
 }
img{
  position:absolute;
  bottom:0;
  width:140px;
  left:50%;
  transform:translatex(-50%);
 }

方法二：改用margin实现居中 #

如果不想合并transform，可以把居中方式换成margin，让翻转操作不影响居中效果：

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

.wrap{
  position:relative;
  width:50%;
  height:100px;
  background:darkorange;
 }
img{
  position:absolute;
  bottom:0;
  width:140px;
  left:50%;
  /* 用margin-left替代translatex，数值为图片宽度的一半 */
  margin-left: -70px;
 }

对应的JS和HTML代码无需修改：

$('img').on('click', function(){
    $(this).addClass('flip');
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='wrap'>
<img src='https://abuena.net/img/logo_01.png' alt='img'>
</div>

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