Bolehkah Transformasi CSS Membalik Teks Secara Mendatar dan Menegak?

Membalik Teks menggunakan CSS

Adakah mungkin untuk memanipulasi teks menggunakan CSS untuk mencerminkan atau membalikkan orientasinya? Soalan ini timbul apabila anda menghadapi senario di mana anda perlu memaparkan aksara atau teks tertentu dalam arah terbalik, seperti membalikkan aksara gunting daripada menghala kanan ke kiri.

Jawapan:

Ya, transformasi CSS menyediakan keupayaan untuk mencerminkan atau menyelak teks. Untuk mencapai ini, anda boleh menggunakan fungsi skala().

Flip Mendatar:

Flip mendatar membalikkan arah teks pada paksi-x, menjadikan ia kelihatan seolah-olah ia menunjuk ke arah yang bertentangan. Untuk mencapai ini, skalakan elemen secara mendatar dengan faktor -1:

<code class="css">-moz-transform: scale(-1, 1);
-webkit-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
-ms-transform: scale(-1, 1);
transform: scale(-1, 1);</code>

Vertical Flip:

Begitu juga, flip menegak membalikkan teks di sepanjang y -paksi, membalikkan arah menegaknya. Untuk melakukan ini, skala elemen secara menegak dengan -1:

<code class="css">-moz-transform: scale(1, -1);
-webkit-transform: scale(1, -1);
-o-transform: scale(1, -1);
-ms-transform: scale(1, -1);
transform: scale(1, -1);</code>

Contoh:

Berikut ialah contoh menggunakan HTML dan CSS untuk menunjukkan kesan flipping:

<code class="html"><span class='flip_H'>Demo text &#9986;</span>
<span class='flip_V'>Demo text &#9986;</span></code>

<code class="css">span {
  display: inline-block;
  margin: 1em;
}
.flip_H {
  transform: scale(-1, 1);
  color: red;
}
.flip_V {
  transform: scale(1, -1);
  color: green;
}</code>

Dengan menggunakan CSS ini, aksara gunting dalam rentang pertama (flip_H) akan dicerminkan secara mendatar, menghadap ke kiri, manakala aksara dalam rentang kedua (flip_V) akan dibalikkan secara menegak, menghadap ke atas turun.

Atas ialah kandungan terperinci Bolehkah Transformasi CSS Membalik Teks Secara Mendatar dan Menegak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!