Вы можете использовать CSS для зеркального отображения / переворачивания текста?

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

два параметра-ось X и ось Y, -1 будет зеркалом, но вы можете масштабировать до любого размера, который вам нравится, чтобы удовлетворить ваши потребности. Вверх ногами и назад было бы (-1, -1).

Если вы заинтересованы в лучшем варианте, доступном для поддержки кросс-браузера еще в 2011 году, см. мой старый ответ.

реальное зеркало:

.mirror {
    display: block; 
    -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);
}

Я собрал это решение, очистив интернет в том числе

• переполнение стека ответы,
• статьи MSDN
• http://css-tricks.com/almanac/properties/t/transform/,
• http://caniuse.com/#search=transform,
• http://browserhacks.com/ и
• http://www.useragentman.com/IETransformsTranslator/.

это решение, кажется, работает во всех браузерах, включая IE6+, используя scale(-1,1) (правильное зеркало) и соответствующий filter/-ms-filter свойства при необходимости (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 screen {
  .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);
}

для кроссбраузерной совместимости создайте этот класс

.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 class="icon-search mirror-icon"></i>

чтобы получить значок поиска с ручкой слева

вы можете использовать либо

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

или

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

обратите внимание, что параметр position до absolute - Это очень важно! Если вы не установите его, вам нужно будет установить display: inline-block;

вы можете использовать 'transform' для достижения этой цели. http://jsfiddle.net/aRcQ8/

css:

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

есть еще rotateY для реального зеркала одно:

transform: rotateY(180deg);

что, пожалуй, еще более понятно и понятно.

EDIT: кажется, не работает на опере, хотя ... к сожалению. Но он отлично работает в Firefox. Я думаю, это может потребовать неявно сказать, что мы делаем какой-то translate3d возможно? Или что-то в этом роде.

просто добавив рабочую демонстрацию для горизонтального и вертикального зеркального отражения.

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

это то, что работал для меня <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);

просто нужен дисплей: встроенный блок или блок для поворота. Поэтому в основном первый ответ хорош. Но -180 не работал.

еще один пример того, как можно перевернуть символ. Добавить префиксы поставщиков, если вы не нуждаются в них, но сейчас все современные браузеры поддерживают без префиксов свойство transform. Единственным исключением является Opera, если включен режим Opera Mini (~3% мировых пользователей).

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

вы можете попробовать box-reflect

box-reflect: 20px right;

посмотреть поле свойств CSS-отражает совместимость? для более подробной информации