Bisakah Anda menggunakan CSS untuk mencerminkan / membalik teks?

Apakah mungkin menggunakan CSS / CSS3 untuk mencerminkan teks?

Secara khusus, saya memiliki karakter gunting "✂" ( ✂) yang ingin saya tampilkan mengarah ke kiri dan bukan ke kanan.

Anda dapat menggunakan transformasi CSS untuk mencapai ini. Pembalikan horizontal akan melibatkan penskalaan div seperti ini:

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

Dan flip vertikal akan melibatkan penskalaan div seperti ini:

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

DEMO:

span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }

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

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

Kedua parameter tersebut adalah sumbu X, dan sumbu Y, -1 akan menjadi cermin, tetapi Anda dapat menskalakan ke ukuran apa pun yang Anda suka sesuai dengan kebutuhan Anda. Bisa terbalik dan mundur (-1, -1).

Jika Anda tertarik dengan opsi terbaik yang tersedia untuk dukungan lintas browser pada tahun 2011, lihat jawaban lama saya .

Cermin nyata:

.mirror{
    display: inline-block; 
    font-size: 30px;

    -webkit-transform: matrix(-1, 0, 0, 1, 0, 0);
    -moz-transform: matrix(-1, 0, 0, 1, 0, 0);
    -o-transform: matrix(-1, 0, 0, 1, 0, 0);
    transform: matrix(-1, 0, 0, 1, 0, 0);
}

<span class='mirror'>Mirror Text<span>

Anda juga dapat menggunakan

.your-class{ 
      position:absolute; 
      -moz-transform: scaleX(-1); 
      -o-transform: scaleX(-1); 
      -webkit-transform: scaleX(-1); 
      transform: scaleX(-1); 
      filter: FlipH;  
}

atau

 .your-class{ 
  position:absolute;
  transform: rotate(360deg) scaleX(-1);
}

Perhatikan bahwa pengaturan positionke absolutesangat penting! Jika Anda tidak ingin menyetelnya, Anda harus menyetelnya display: inline-block;

Saya menyusun solusi ini dengan menjelajahi Internet termasuk

• Jawaban Stack Overflow,
• Artikel MSDN,
• http://css-tricks.com/almanac/properties/t/transform/ ,
• http://caniuse.com/#search=transform ,
• http://browserhacks.com/ , dan
• http://www.useragentman.com/IETransformsTranslator/ .

Solusi ini tampaknya berfungsi di semua browser termasuk IE6 +, menggunakan scale(-1,1)(mirror yang tepat) dan properti filter/ yang sesuai -ms-filterbila diperlukan (IE6-8):

/* Cross-browser mirroring of content. Note that CSS pre-processors
  like Less cough on the media hack. 

  Microsoft recommends using BasicImage as a more efficent/faster form of
  mirroring, instead of FlipH or some kind of Matrix scaling/transform.
  @see http://msdn.microsoft.com/en-us/library/ms532972%28v=vs.85%29.aspx
  @see http://msdn.microsoft.com/en-us/library/ms532992%28v=vs.85%29.aspx
*/

/* IE8 only via hack: necessary because IE9+ will also interpret -ms-filter,
  and mirroring something that's already mirrored results in no net change! */
@media \0screen {
  .mirror {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(mirror=1)";
  }
}
.mirror {
  /* IE6 and 7 via hack */
  *filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
  /* Standards browsers, including IE9+ */
  -moz-transform: scale(-1,1);
  -ms-transform: scale(-1,1);
  -o-transform: scale(-1,1); /* Op 11.5 only */
  -webkit-transform: scale(-1,1);
  transform: scale(-1,1);
}

Untuk kompatibilitas lintas browser, buat kelas ini

.mirror-icon:before {
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1);
}

Dan tambahkan ke kelas ikon Anda, yaitu

<i class="icon-search mirror-icon"></i>

untuk mendapatkan ikon penelusuran dengan pegangan di sebelah kiri

Anda dapat menggunakan 'transformasi' untuk mencapai ini. http://jsfiddle.net/aRcQ8/

css:

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);

Ada juga rotateYuntuk cermin sungguhan:

transform: rotateY(180deg);

Yang, mungkin, lebih jelas dan bisa dimengerti.

EDIT: Sepertinya tidak berfungsi di Opera… sayangnya. Tetapi berfungsi dengan baik di Firefox. Saya kira mungkin diperlukan untuk secara implisit mengatakan bahwa kita melakukan semacam translate3dmungkin? Atau semacam itu.

Hanya menambahkan demo kerja untuk flip cermin horizontal dan vertikal.

.horizontal-flip {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.vertical-flip {
  -moz-transform: scale(1, -1);
  -webkit-transform: scale(1, -1);
  -o-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

<div class="horizontal-flip">
  Hello, World
  <input type="text">
</div>
<hr>
<div class="vertical-flip">
  Hello, World
  <input type="text">
</div>

untuk inilah saya berhasil <span class="navigation-pipe">&gt;</span>

display:inline-block;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4);

hanya perlu tampilan: blok sebaris atau blok untuk memutar. Jadi pada dasarnya jawaban pertama bagus. Tapi -180 tidak berhasil.

Anda bisa mencoba kotak-refleksi

box-reflect: 20px right;

lihat kompatibilitas kotak-mencerminkan properti CSS? untuk lebih jelasnya

Satu lagi contoh bagaimana karakter bisa dibalik. Tambahkan awalan vendor jika Anda membutuhkannya, tetapi untuk saat ini semua browser modern mendukung properti transformasi yang tidak diperbaiki. Satu-satunya pengecualian adalah Opera jika mode Opera Mini diaktifkan (~ 3% pengguna dunia).

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Text rotation</title>
  <style type="text/css" media="screen">
    .scissors {
      display: inline-block;
      font-size: 50px;
      color: red;
    }
    .original {
      color: initial;
    }
    .flipped {
      transform: rotateZ(180deg);
    }
    .upward {
      transform: rotateZ(-90deg);
    }
    .downward {
      transform: rotateZ(90deg);
    }
  </style>
  
</head>
<body>
  <ul>
    <li>Original: <span class="scissors original">&#9986;</span></li>
    <li>Flipped: <span class="scissors flipped">&#9986;</span></li>
    <li>Upward: <span class="scissors upward">&#9986;</span></li>
    <li>Downward: <span class="scissors downward">&#9986;</span></li>
  </ul>
</body>
</html>

direction: rtl; mungkin itulah yang Anda cari.

Itu berfungsi dengan baik dengan ikon font seperti 's7 stroke icons' dan 'font-awesome' :

.mirror {
  display: inline-block;
  transform: scaleX(-1);
}

Dan kemudian pada elemen target:

<button>
  <span class="s7-back mirror"></span>
  <span>Next</span>
</button>