Spiegeln, aber Übersetzung stabil halten

Question

Wenn ich das Bild umdrehe, erfolgt auch die Transformation: Die Übersetzung erfolgt in die entgegengesetzte Richtung. Wie erreicht man eine Spiegelung der aktuellen Übersetzungsposition?

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>

Da das Bild mithilfe einer Funktion gezogen und die Transformation dynamisch aktualisiert wird, ist mit einer anderen Lösung als dieser zu rechnen ->

Answer 1

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

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

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