镜像但保持平移稳定

Question

当我翻转图像时，也进行变换：平移方向相反。 如何实现当前平移位置的镜像？

img {
  transform: translate(50px, 100px);
  /* scale:-1; */
}

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

由于图像正在使用函数拖动并动态更新变换，期望找到与此解决方案不同的解决方案 -> 变换：translate(50px, 100px) scale(-1);

Answer 1

你真的不再需要 transform-property，据我所知，你可以这样做：

img {
  translate: 50px 100px;
  scale: -1 1;
}

scale 属性最多采用 3 个值，对应于 3 个轴 (x,y,z)。 如果仅提供 1 个值，则 x 轴和 y 轴均采用该值。这就是为什么您可以将其赋予值，第一个用于 x 轴，第二个用于 y 轴。