Miroir mais gardez la traduction stable

Question

Quand je retourne l'image, la transformation se fait également : la translation se fait dans le sens inverse. Comment réaliser une mise en miroir de la position de traduction actuelle ?

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>

Comme l'image est déplacée à l'aide d'une fonction et que la transformation est mise à jour dynamiquement, attendez-vous à trouver une solution différente de celle-ci -> Transform : translate(50px, 100px) scale(-1);

Answer 1

Vous n'avez vraiment plus besoin de la propriété transform, pour autant que je sache, vous pouvez faire ceci :

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

scale La propriété prend jusqu'à 3 valeurs, correspondant à 3 axes (x,y,z). Si une seule valeur est fournie, cette valeur sera utilisée pour les axes X et Y. C'est pourquoi vous pouvez lui attribuer des valeurs, la première pour l'axe des x et la seconde pour l'axe des y.