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

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

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

ОТВЕТЫ

Ответ 1

Вы можете использовать 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>

Ответ 2

-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 году, см. мой более старый ответ.

Ответ 3

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

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

Ответ 4

Пользователь может

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

Ответ 5

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

Это решение работает во всех браузерах, включая 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 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);
}

Ответ 6

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

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

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

Ответ 7

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

CSS

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

Ответ 8

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

transform: rotateY(180deg);

Что, возможно, еще более понятно и понятно.

РЕДАКТИРОВАТЬ: Не работает на Opera, хотя... к сожалению. Но он отлично работает на Firefox. Думаю, это может потребоваться, чтобы косвенно сказать, что мы делаем что-то вроде translate3d, возможно? Или что-то в этом роде.

Ответ 9

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

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

Ответ 10

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

Ответ 11

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