menu

Questions & Answers

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);

Answers(3) :

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.