Cermin tetapi pastikan terjemahan stabil

Question

Apabila saya menyelak imej, transformasi juga dilakukan: terjemahan adalah dalam arah yang bertentangan. Bagaimana untuk mencapai pencerminan kedudukan terjemahan semasa?

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>

Memandangkan imej diseret menggunakan fungsi dan transformasi dikemas kini secara dinamik, harapkan untuk mencari penyelesaian yang berbeza daripada yang ini -> Transform: translate(50px, 100px) scale(-1);

Answer 1

Anda benar-benar tidak memerlukan transform-harta lagi, setakat yang saya tahu anda boleh melakukan ini:

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

scale Harta memerlukan sehingga 3 nilai, sepadan dengan 3 paksi (x,y,z). Jika hanya 1 nilai disediakan, nilai tersebut akan digunakan untuk kedua-dua paksi x dan y. Itulah sebabnya anda boleh menetapkan nilainya, yang pertama untuk paksi-x dan yang kedua untuk paksi-y.