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

Можно ли использовать CSS / CSS3 для зеркального отображения текста?

В частности, у меня есть этот символ ножниц «✂» ( ✂), который я хотел бы отображать влево, а не вправо.

Вы можете использовать CSS-преобразования для достижения этой цели. Горизонтальный переворот будет включать масштабирование div следующим образом:

-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 следующим образом:

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

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

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

Настоящее зеркало:

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

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

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

Я собрал это решение, обыскивая Интернет, включая

• Ответы переполнения стека,
• Статьи 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 \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);
}

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

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

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

Вы можете использовать «преобразование» для достижения этой цели. http://jsfiddle.net/aRcQ8/

CSS:

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

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

transform: rotateY(180deg);

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

РЕДАКТИРОВАТЬ: Кажется, не работает на Opera, хотя ... к сожалению. Но он отлично работает на 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 не сработало.

Вы можете попробовать коробку-отражение

box-reflect: 20px right;

см. CSS свойство box-отражает совместимость? Больше подробностей

Еще один пример того, как персонаж может быть перевернут. Добавьте префиксы поставщиков, если они вам нужны, но пока все современные браузеры поддерживают свойство префикса без префиксов. Единственное исключение - 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>

direction: rtl; это, вероятно, то, что вы ищете.

Это прекрасно работает с иконками шрифтов, такими как 's7 stroke icons' и 'font-awesome' :

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

А затем на целевой элемент:

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