Mirror image but keep translate stable

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 class="draggable" 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);

solved by wrapping scaled element with another div

``````img {
scale: -1 1;
}
.img-wrapper{
transform: translate(50px, 100px);
}``````
``````<div class="img-wrapper draggable">
<img class="" src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__340.png" width=200>
</div>``````

Having the translate properties calculated separately seems to do the trick

``````img{
transform: translateX(50px) translateY(100px) scaleX(-1);
}``````
``<img class="draggable" src="https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__340.png" width=200>``

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 class="draggable" 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.