Bagaimanakah saya boleh menyelak teks secara mendatar dan menegak menggunakan transformasi CSS?

Membalik Teks menggunakan Transformasi CSS

Dalam CSS, anda boleh memanipulasi teks dan elemen lain menggunakan transformasi. Satu transformasi biasa ialah pencerminan, juga dikenali sebagai flipping. Kesan ini boleh dicapai menggunakan sifat CSS yang mudah.

Untuk membalikkan teks secara mendatar (cerminkannya merentasi paksi menegak), gunakan sifat CSS berikut:

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

Sifat ini menskalakan elemen secara mendatar sebanyak -1, dengan berkesan membalikkannya di sepanjang paksi menegak.

Begitu juga, untuk menyelak teks secara menegak (cerminkannya merentasi paksi mendatar), gunakan sifat ini:

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

Dengan menggunakan sifat ini, anda menskalakan elemen secara menegak sebanyak -1, membalikkannya di sepanjang paksi mendatar.

Contoh

Pertimbangkan kod HTML berikut, yang memaparkan beberapa teks dan aksara gunting:

Teks demo ✂
Teks tunjuk cara ✂

Kod CSS di bawah menggunakan kesan flip mendatar dan menegak pada rentang yang sepadan:

span{ paparan: inline-block; margin:1em; }
.flip_H{ transform: skala(-1, 1); warna:merah; }
.flip_V{ transform: skala(1, -1); warna:hijau; }

Ini akan mencerminkan aksara gunting di sepanjang paksi masing-masing, menghasilkan gunting menghala ke kiri yang diingini.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyelak teks secara mendatar dan menegak menggunakan transformasi CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!