When I flipped the image, also transform: translate in goes the reverse direction. How to achieve a mirror image in the current translated position?

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

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

Since image is dragging with a function and updated transform dynamicaly expecting to find different than this solution -> transform: translate(50px, 100px) scale(-1);

CodePudding user response：

Having the translate properties calculated separately seems to do the trick

img{
  transform: translateX(50px) translateY(100px) scaleX(-1);
}

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

CodePudding user response：

You don't really need transform-property anymore, as far as I know, you could just do:

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

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

The scale-property takes up to 3 values, corresponding to the 3 axis (x,y,z). If only 1 value is provided it takes that for both x- and y-axis. That's why you can give it to values, first one for the x-axis, second one for the y-axis.