Czy możesz używać CSS do lustrzanego / przerzucania tekstu?

Czy można używać CSS / CSS3 do dublowania tekstu?

W szczególności mam ten znak nożyczek „✂” ( ✂), który chciałbym wyświetlić, wskazując w lewo, a nie w prawo.

Aby to osiągnąć, możesz użyć transformacji CSS. Odwrócenie w poziomie wymagałoby skalowania div w następujący sposób:

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

A pionowe odwrócenie wymagałoby skalowania div w następujący sposób:

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

PRÓBNY:

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

Dwa parametry to oś X, a oś Y, -1 będzie lustrem, ale można skalować do dowolnego rozmiaru, który Ci odpowiada. Byłoby do góry nogami i do tyłu (-1, -1).

Jeśli interesuje Cię najlepsza dostępna opcja obsługi wielu przeglądarek w 2011 roku, zobacz moją starszą odpowiedź .

Prawdziwe lustro:

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

Możesz także użyć jednego z nich

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

lub

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

Zauważ, że ustawienie positionna absolutejest bardzo ważne! Jeśli go nie ustawisz, musisz go ustawić display: inline-block;

Połączyłem to rozwiązanie, przeszukując Internet, w tym

• Odpowiedzi przepełnienia stosu,
• Artykuły MSDN,
• http://css-tricks.com/almanac/properties/t/transform/ ,
• http://caniuse.com/#search=transform ,
• http://browserhacks.com/ i
• http://www.useragentman.com/IETransformsTranslator/ .

Wydaje się, że to rozwiązanie działa we wszystkich przeglądarkach, w tym IE6 +, wykorzystując scale(-1,1)(odpowiednie lustro) i odpowiednie filter/ -ms-filterwłaściwości w razie potrzeby (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);
}

Dla kompatybilności z różnymi przeglądarkami utwórz tę klasę

.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);
}

I dodaj go do swojej klasy ikon, tj

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

aby uzyskać ikonę wyszukiwania z uchwytem po lewej stronie

możesz to zrobić za pomocą „transformacji”. http://jsfiddle.net/aRcQ8/

css:

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

Jest też rotateYprawdziwy lustrzany:

transform: rotateY(180deg);

Co może być jeszcze bardziej jasne i zrozumiałe.

EDYCJA: Wygląda na to, że nie działa w Operze… niestety. Ale działa dobrze w przeglądarce Firefox. Wydaje mi się, że konieczne może być niejawne stwierdzenie, że robimy coś takiego translate3d? Czy jakoś tak.

Wystarczy dodać działającą wersję demonstracyjną dla poziomego i pionowego obrócenia lustra.

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

dla mnie to zadziałało <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);

wystarczy wyświetlić: blok w wierszu lub blok, aby obrócić. Zasadniczo pierwsza odpowiedź jest dobra. Ale -180 nie działało.

Możesz spróbować odbić pole

box-reflect: 20px right;

zobacz zgodność CSS z właściwością odzwierciedlającą pole? po więcej szczegółów

Jeszcze tylko jeden przykład, w jaki sposób można odwrócić postać. Dodaj prefiksy dostawcy, jeśli są potrzebne, ale na razie wszystkie nowoczesne przeglądarki obsługują nieprefiksowaną właściwość transformacji. Jedynym wyjątkiem jest Opera, jeśli włączony jest tryb Opera Mini (~ 3% użytkowników na całym świecie).

<!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; jest prawdopodobnie tym, czego szukasz.

Działa to dobrze z ikonami czcionek, takimi jak „ ikony s7 stroke” i „font-awesome” :

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

A następnie na elemencie docelowym:

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