Você pode usar CSS para espelhar / inverter texto?

É possível usar CSS / CSS3 para espelhar texto?

Especificamente, tenho esta tesoura com o caractere “✂” ( ✂) que gostaria de exibir apontando para a esquerda e não para a direita.

Você pode usar transformações CSS para conseguir isso. Um flip horizontal envolveria o dimensionamento da div assim:

-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 um flip vertical envolveria o dimensionamento da div assim:

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

Os dois parâmetros são o eixo X e o eixo Y -1 será um espelho, mas você pode dimensionar para qualquer tamanho que desejar para atender às suas necessidades. De cabeça para baixo e para trás seria (-1, -1).

Se você está interessado na melhor opção disponível para suporte a vários navegadores em 2011, veja minha resposta mais antiga .

Espelho real:

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

Você pode usar qualquer um

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

ou

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

Observe que definir positioncomo absoluteé muito importante! Se você não definir, precisará definir display: inline-block;

Eu juntei esta solução vasculhando a Internet, incluindo

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

Essa solução parece funcionar em todos os navegadores, incluindo o IE6 +, usando scale(-1,1)(um espelho adequado) e as propriedades filter/ apropriadas -ms-filterquando necessário (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);
}

Para compatibilidade entre navegadores, crie esta 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 adicione-o à sua classe de ícones, ou seja,

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

para obter um ícone de pesquisa com a alça à esquerda

você pode usar 'transformar' para conseguir isso. http://jsfiddle.net/aRcQ8/

css:

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

Há também o rotateYpara um espelho real:

transform: rotateY(180deg);

O que talvez seja ainda mais claro e compreensível.

EDIT: Parece que não funciona no Opera ... infelizmente. Mas funciona bem no Firefox. Eu acho que pode ser necessário dizer implicitamente que estamos fazendo algum tipo de translate3dtalvez? Ou algo assim.

Basta adicionar uma demonstração de trabalho para o espelho horizontal e vertical.

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

isto é o que funcionou para mim <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);

só precisa de exibição: bloco embutido ou bloco para girar. Então, basicamente, a primeira resposta é boa. Mas -180 não funcionou.

Você pode tentar refletir a caixa

box-reflect: 20px right;

veja a propriedade CSS refletir compatibilidade com caixas? para mais detalhes

Apenas mais um exemplo de como o personagem pode ser invertido. Adicione prefixos de fornecedores se precisar, mas por enquanto todos os navegadores modernos suportam propriedades de transformação sem prefixo. A única exceção é o Opera se o modo Opera Mini estiver ativado (~ 3% dos usuários do mundo).

<!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; é provavelmente o que você está procurando.

Isso funciona bem com ícones de fontes como 's7 stroke icons' e 'font-awesome' :

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

E então no elemento de destino:

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