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

235

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

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

pistacchio
источник
9
Если изображение ножниц по какой-то причине не работает для вас, я видел, что оно сфальсифицировано с% <и>%
Пит Уилсон,
1
Смотрите эту ветку: stackoverflow.com/questions/3433641/… [1]: stackoverflow.com/questions/3433641/…
Лукас Валь
3
Ответ Майкла более точный. Можете ли вы обновить правильный ответ? Потому что ответ, который вы отметили как правильный, не зеркальный, а поворот на 180 градусов.
Санкет Саху
@PeteWilson,? ✂ символ настолько распространен? Для чего он используется?
Pacerier
4
Имейте в виду, что вращение отличается в зависимости от реализации смайликов. На яблоках смайлики направлены вниз.
Akkumulator

Ответы:

411

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

methodofaction
источник
4
Это должен быть правильный ответ! (зеркала вдоль вертикальной оси, масштаб (1, -1) для горизонтальной оси)
Дизайн Адриана
Это, безусловно, ответ, отвечающий самым строгим стандартам, к сожалению, мы не живем в мире, где это на самом деле работает для всех случаев использования.
Крис Соболевски
Не могли бы вы включить в свой ответ действительные браузерные префиксы с последним без префикса? CSS, как вы дали, не работает.
Серрано
@SerranoPereira действительно, спасибо за предложение. Ответ исправлен.
methodofaction
11
Обратите внимание, что CSS-преобразование не работает со встроенными элементами, такими как предложенные Фондом теги <i>, если только вы не зададите затем display: inline-block.
загадка
66
-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 году, см. Мой старый ответ .

Крис Соболевски
источник
21
Технически это не зеркало. его вращается. Так что он будет работать только с некоторыми типами элементов
borisrorsvort
4
У меня были некоторые проблемы в Chrome, пока я не добавил display: inline-block в свой промежуток (используя пиктограммы)
Clarence Liu
1
Учитывая, что когда был задан этот вопрос, преобразования браузера не получили широкой поддержки, я бы сказал, что это был правильный ответ. На самом деле преобразования не поддерживаются до IE 9, поэтому я бы сказал, что это ЕДИНСТВЕННЫЙ правильный ответ, по крайней мере, немного дольше.
Крис Соболевски
Этот ответ неверен, это не зеркало. Это работает только в этом одном случае, потому что символ, данный в примере, является вертикально асимметричным.
gregtczap
Хотя это само по себе полезно, оно не является ответом на конкретный вопрос. Я нашел этот вопрос через поисковик, потому что я хотел перевернуть изображение по горизонтали. Это не симметрично, как ножницы ОП.
gillytech
58

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

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

Сисеро Вернек Корреа
источник
14
Вы должны всегда ставить (без префикса) собственности соответствующего стандартам прошлого, так что , когда стандарт будет принят в браузере, он будет использовать версию , основанные на стандарты вместо (старше, buggier) приставка версии. В этом случае это означает «преобразование: матрица (-1, 0, 0, 1, 0, 0);» должно быть последним свойством. (Отредактировал ответ, чтобы отразить это.)
Jay Dansand
7
Я не знаю , должно ли это быть на правильный ответ или вопрос , но я хочу , чтобы fontawesome / пользователи бутстраповских знают о fa-flip-horizontalи fa-flip-verticalсвойствах
лол
1
Отличный реальный ответ. Однако дисплей: блок; не обязательно нужно.
Джилли
6
да ... дисплей: блок; или нужен встроенный блок
dGo
Это было действительно полезно для сохранения правильной ориентации текста на задней стороне элемента при повороте вдоль оси Y. Например:backface-visibility: visible; transform-origin: center center; transform-style: preserve-3d; transform: matrix(-1, 0, 0, 1, 0, 0) rotateY(180deg) ;
парламент
12

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

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

Эмануэла Колта
источник
7

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

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

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

Майкл
источник
3

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

CSS:

-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
Рито
источник
3

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

transform: rotateY(180deg);

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

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

jeromej
источник
1
Для тех, кто интересуется, это 3D-трансформация. Я думаю, что это определенно более читабельно / понятно, чем методы масштаба и матрицы, приведенные ранее.
gregtczap
Я не вижу, как вращение является зеркалом - это может показаться только в одном особом случае.
Cel
@celsharp он находится на оси Y, поэтому вы видите изображение / элемент со спины, таким образом, зеркальное отражение.
Иеромей
1

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

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

niyasc
источник
0

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

Iggy
источник
0

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

box-reflect: 20px right;

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

Sudeep
источник
1
box -lect является собственностью только для webkit. но я не думаю, что у него есть -moz- эквивалент. Проверьте это сообщение ..
mithunsatheesh
Также сепаратор должен быть :не;
mithunsatheesh
0

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

друган
источник
0

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

Христо Тодоров
источник
-1

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

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

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

<button>
  <span class="s7-back mirror"></span>
  <span>Next</span>
</button>
Дмитрий Анч
источник