Puoi usare CSS per specchiare / capovolgere il testo?

È possibile utilizzare CSS / CSS3 per eseguire il mirroring del testo?

In particolare, ho questo carattere a forbice “✂” ( ✂) che vorrei visualizzare puntando a sinistra e non a destra.

È possibile utilizzare le trasformazioni CSS per raggiungere questo obiettivo. Una rotazione orizzontale implicherebbe il ridimensionamento del div in questo modo:

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

E una rotazione verticale implicherebbe il ridimensionamento del div in questo modo:

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

I due parametri sono l'asse X e l'asse Y, -1 sarà uno specchio, ma è possibile ridimensionare a qualsiasi dimensione desiderata per soddisfare le proprie esigenze. Sottosopra e indietro sarebbe (-1, -1).

Se sei interessato alla migliore opzione disponibile per il supporto cross-browser nel 2011, vedi la mia risposta precedente .

Specchio reale:

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

Puoi anche l'utente

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

o

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

Notare che l'impostazione positionsu absoluteè molto importante! Se non lo imposterai, dovrai impostare display: inline-block;

Ho messo insieme questa soluzione perlustrando Internet, incluso

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

Questa soluzione sembra funzionare in tutti i browser incluso IE6 +, usando scale(-1,1)(un mirror corretto) e appropriate filter/ -ms-filterproperties quando necessario (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);
}

Per la compatibilità tra browser, creare questa classe

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

E aggiungilo alla tua classe di icone, ad es

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

per ottenere un'icona di ricerca con la maniglia a sinistra

puoi usare 'trasforma' per raggiungere questo obiettivo. http://jsfiddle.net/aRcQ8/

css:

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

C'è anche il rotateYvero specchio:

transform: rotateY(180deg);

Che, forse, è ancora più chiaro e comprensibile.

EDIT: Sembra non funzionare su Opera però ... purtroppo. Ma funziona bene su Firefox. Immagino che potrebbe essere necessario dire implicitamente che stiamo facendo una specie di translate3dforse? O qualcosa di simile.

Basta aggiungere una demo funzionante per il mirroring orizzontale e verticale.

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

questo è ciò per cui ha funzionato <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);

basta solo visualizzare: blocco in linea o blocco per ruotare. Quindi sostanzialmente la prima risposta è buona. Ma -180 non ha funzionato.

Puoi provare box-reflection

box-reflect: 20px right;

vedi la proprietà CSS rispecchia la compatibilità con la casella? per ulteriori dettagli

Solo un altro esempio di come il personaggio potrebbe essere girato. Aggiungi prefissi fornitore se ne hai bisogno, ma per ora tutti i browser moderni supportano la proprietà di trasformazione non prefissata. L'unica eccezione è Opera se la modalità Opera Mini è abilitata (~ 3% utenti mondiali).

<!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; è probabilmente quello che stai cercando.

Funziona bene con icone di font come 's7 stroke icons' e 'font-awesome' :

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

E poi sull'elemento target:

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