¿Se puede usar CSS para reflejar / voltear texto?

¿Es posible usar CSS / CSS3 para reflejar el texto?

Específicamente, tengo este carácter de tijera “✂” ( ✂) que me gustaría mostrar apuntando hacia la izquierda y no hacia la derecha.

Puede usar transformaciones CSS para lograr esto. Un giro horizontal implicaría escalar el div de esta manera:

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

Y un giro vertical implicaría escalar el div de esta manera:

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

MANIFESTACIÓN:

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

Los dos parámetros son el eje X y el eje Y, -1 será un espejo, pero puede escalar a cualquier tamaño que desee para satisfacer sus necesidades. Al revés y al revés lo sería (-1, -1).

Si está interesado en la mejor opción disponible para soporte de navegador cruzado en 2011, vea mi respuesta anterior .

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

Puedes usar cualquiera

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

Tenga en cuenta que el establecimiento positionde absolutees muy importante! Si no lo configura, deberá configurarlo display: inline-block;

He improvisado esta solución rastreando Internet incluyendo

• Stack Overflow responde,
• Artículos de MSDN,
• http://css-tricks.com/almanac/properties/t/transform/ ,
• http://caniuse.com/#search=transform ,
• http://browserhacks.com/ , y
• http://www.useragentman.com/IETransformsTranslator/ .

Esta solución parece funcionar en todos los navegadores, incluido IE6 +, utilizando scale(-1,1)(un espejo adecuado) y propiedades apropiadas filter/ -ms-filtercuando sea necesario (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 compatibilidad cruzada con el navegador, cree esta clase

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

Y agréguelo a su clase de ícono, es decir

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

para obtener un icono de búsqueda con el asa a la izquierda

puedes usar 'transformar' para lograr esto. http://jsfiddle.net/aRcQ8/

css:

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

También está el rotateYde un espejo real:

transform: rotateY(180deg);

Lo cual, tal vez, es aún más claro y comprensible.

EDITAR: Aunque no parece funcionar en Opera ... tristemente. Pero funciona bien en Firefox. Supongo que podría ser necesario decir implícitamente que estamos haciendo algún tipo de translate3dtal vez. O algo así.

Simplemente agregue una demostración de trabajo para la inversión de espejo horizontal y 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>

esto es lo que funcionó para mí <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);

solo necesita mostrar: bloque en línea o bloque para rotar. Entonces, básicamente, la primera respuesta es buena. Pero -180 no funcionó.

Podrías probar box-reflect

box-reflect: 20px right;

ver compatibilidad de cuadro de propiedad CSS-reflect? para más detalles

Solo un ejemplo más de cómo el personaje podría voltearse. Agregue prefijos de proveedor si los necesita, pero por ahora todos los navegadores modernos admiten la propiedad de transformación no prefijada. La única excepción es Opera si el modo Opera Mini está habilitado (~ 3% de usuarios mundiales).

<!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; es probablemente lo que estás buscando.

Eso funciona bien con los iconos de fuente como 's7 stroke icons' y 'font-awesome' :

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

Y luego en el elemento objetivo:

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