search

Home  >  Q&A  >  body text

Mirror but keep translation stable

When I flip the image, the transformation is also done: the translation is in the opposite direction. How to achieve mirroring of the current translation 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 the image is being dragged using a function and the transform is dynamically updated, expect to find a different solution than this one -> Transform: translate(50px, 100px) scale(-1);

P粉680087550P粉680087550333 days ago511

reply all(1)I'll reply

  • P粉909476457

    P粉9094764572024-02-18 15:58:00

    You don't really need the transform-property anymore, as far as I know you can do this:

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

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

    reply
    0
  • Cancelreply