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

235

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.

pistacchio
źródło
9
Jeśli obraz nożyczek z jakiegoś powodu Ci się nie udaje, widziałem, że sfałszowano go za pomocą% <i>%
Pete Wilson
3
Odpowiedź Micheala jest dokładniejsza. Czy możesz zaktualizować poprawną odpowiedź? Ponieważ odpowiedź, którą oznaczyłeś jako poprawną, to nie lustro, ale obrót o 180 stopni.
Sanket Sahu,
@PeteWilson,? Czy znak so char jest tak powszechny? Do czego służy?
Pacerier
4
Pamiętaj, że obrót jest różny w zależności od implementacji emoji. Na zestawie emotikonów Apple jest skierowany w dół.
Akkumulator

Odpowiedzi:

411

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>

methodofaction
źródło
4
To powinna być poprawna odpowiedź! (lustra wzdłuż osi pionowej, skala (1, -1) dla osi poziomej)
Projekt Adrian
Jest to z pewnością odpowiedź zgodna ze standardami nost, niestety nie żyjemy w świecie, w którym tak naprawdę działa to we wszystkich przypadkach użycia.
Chris Sobolewski
Czy mógłbyś podać w swojej odpowiedzi rzeczywiste prefiksy przeglądarki, przy czym nieprefiksowany ostatni? Podany CSS nie działa.
Serrano
@ SerranoPereira rzeczywiście, dzięki za sugestię. Odpowiedź zmieniona.
methodofaction
11
Zauważ, że transformacja CSS nie działa na elementach wewnętrznych, takich jak sugerowane tagi <i> Foundation, chyba że podasz również display: inline-block.
rejestracja
66
-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ź .

Chris Sobolewski
źródło
21
Technicznie nie jest to lustro. jest obrócony. Będzie więc działał tylko z niektórymi elementami
borisrorsvort 16.01.2013
4
Miałem pewne problemy z Chrome, dopóki nie dodałem display: block inline do mojego zakresu (używając czcionek pictos)
Clarence Liu
1
Biorąc pod uwagę, że kiedy zadano to pytanie, transformacje przeglądarki nie były szeroko obsługiwane, argumentowałbym, że BYŁA to właściwa odpowiedź. W rzeczywistości transformacje nie są obsługiwane aż do IE 9, więc argumentowałbym, że jest to wciąż właściwa odpowiedź, przynajmniej przez chwilę.
Chris Sobolewski,
Ta odpowiedź jest zła, nie jest lustrem. Działa tylko w tym jednym przypadku, ponieważ symbol podany w przykładzie jest pionowo asymetryczny.
gregtczap
Chociaż jest to przydatne samo w sobie, nie jest to odpowiedź na dokładnie zadane pytanie. Znalazłem to pytanie w wyszukiwarce, ponieważ chciałem odwrócić obraz w poziomie. Nie jest symetryczny jak nożyczki OP.
gillytech,
58

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>

Cícero Verneck Corrêa
źródło
14
Należy zawsze umieścić (non-przedrostkiem) właściwość zgodny ze standardami ostatni, tak, że kiedy norma jest przyjęta przez przeglądarkę, będzie korzystał z wersji oparte na standardach zamiast (starszy, buggier) w wersji ustalonej. W tym przypadku oznacza to „transform: matrix (-1, 0, 0, 1, 0, 0);” powinna być ostatnią właściwością. (
Edytowałem
7
Nie wiem, czy to powinna być poprawna odpowiedź, czy pytanie, ale chcę, aby użytkownicy fontawesome / bootstrap wiedzieli o właściwościach fa-flip-horizontali fa-flip-verticalwłaściwościach
lol
1
Świetna prawdziwa odpowiedź. Jednak wyświetlanie: blok; niekoniecznie potrzebne.
Gilly
6
yep ... display: block; lub potrzebny jest blok wbudowany
dGo
Było to bardzo pomocne, aby zachować prawidłową orientację tekstu na tylnej powierzchni elementu, gdy jest on obracany wzdłuż osi Y. Na przykład:backface-visibility: visible; transform-origin: center center; transform-style: preserve-3d; transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg) ;
parlament
12

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;

Emanuela Colta
źródło
7

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

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);
}
Jay Dansand
źródło
6

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

Michael
źródło
3

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

css:

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
Rito
źródło
3

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.

jeromej
źródło
1
Dla tych, którzy zastanawiają się, jest to transformacja 3D. Myślę, że jest zdecydowanie bardziej czytelny / zrozumiały niż podane wcześniej metody skali i matrycy.
gregtczap
Nie rozumiem, jak obrót jest lustrem - wydaje się, że tak jest tylko w jednym szczególnym przypadku.
cel sharp
@celsharp jest na osi Y, więc widzisz obraz / element z jego tyłu, a zatem jest odbity w lustrze.
jeromej
1

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>

niyasc
źródło
0

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.

Iggy
źródło
0

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>

narkoman
źródło
0

direction: rtl; jest prawdopodobnie tym, czego szukasz.

Христо Тодоров
źródło
-1

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>
Dmitry Anch
źródło