Bagaimanakah Saya Boleh Menggunakan CSS untuk Mencipta Teks Cermin atau Terbalik?

Menggunakan CSS untuk Mencerminkan Teks

Adakah ia boleh dilakukan untuk memanipulasi teks menggunakan CSS untuk menjadikannya kelihatan dicerminkan atau dibalikkan? Sebagai contoh, kita mungkin mahu memaparkan aksara gunting "✂" menghadap ke kiri dan bukannya ke kanan.

CSS Transforms to the Rescue

Transformasi CSS memungkinkan untuk mencapai kesan ini. Untuk menyelak teks secara mendatar, skalakan elemen secara negatif pada paksi-x:

``
-moz-transform: scale(-1, 1);
-webkit-transform: scale(- 1, 1);
-o-transform: skala(-1, 1);
-ms-transform: skala(-1, 1);
transform: skala(-1, 1);
``

Untuk menyelak teks secara menegak, skalakan elemen secara negatif pada paksi-y:

``
-moz-transform: scale(1, -1);
-webkit-transform: skala(1, -1);
-o-transform: skala(1, -1);
-ms-transform: skala(1, -1);
transform: scale(1, -1);
``

Demonstrasi

Begini cara menggunakan transformasi ini dalam amalan:

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

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

Dengan menambahkan kelas masing-masing .flip_H atau .flip_V pada elemen, anda boleh membalikkan teks secara mendatar atau menegak dengan mudah.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan CSS untuk Mencipta Teks Cermin atau Terbalik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!