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

Question

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

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

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

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

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

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

Answer 5

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

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

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

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

Answer 7

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

CSS:

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

Answer 8

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

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

Answer 9

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

transform: rotateY(180deg);

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

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

Answer 10

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