镜像图片时维持translate属性稳定的技术实现咨询

当你用transform: translate()定位图片后，添加scale(-1)会导致平移方向反向——这是因为CSS变换是从右到左顺序执行的（实际是先执行scale(-1)，再执行translate）。但由于图片的平移值是拖动时动态更新的，无法直接把translate和scale写在同一个transform属性里，这里提供两种可行方案：

方案1：嵌套容器分离变换（推荐） #

把平移和镜像变换拆分到两个层级元素上：用外层容器负责动态平移，图片自身固定设置镜像效果，两者互不干扰。

代码示例 #

<div class="draggable-container">
  <img src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__340.png" width=200>
</div>

.draggable-container {
  /* 拖动时仅更新这个容器的translate值 */
  transform: translate(50px, 100px);
}
.draggable-container img {
  /* 固定设置镜像，无需改动 */
  transform: scale(-1);
}

原理 #

平移只作用在容器上，镜像只作用在图片本身，拖动时只需要修改容器的transform: translate(...)即可，完全不会影响镜像后的位置逻辑。

方案2：用CSS变量存储平移值 #

如果必须在同一个元素上处理，可以用CSS变量单独存储平移坐标，动态更新变量而非整个transform属性：

代码示例 #

<img class="draggable" src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__340.png" width=200>

.draggable {
  --tx: 50px;
  --ty: 100px;
  transform: translate(var(--tx), var(--ty)) scale(-1);
}

使用方式 #

拖动时通过JS更新元素的--tx和--ty变量即可，比如：

// 假设拖动后得到新的x、y坐标
img.style.setProperty('--tx', `${newX}px`);
img.style.setProperty('--ty', `${newY}px`);

这样无需修改整个transform字符串，就能保持镜像效果同时更新平移位置。

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