Чи можете ви використовувати CSS для дзеркального / гортання тексту?

Чи можна використовувати CSS / CSS3 для дзеркального тексту?

Зокрема, у мене є ця ножиця «✂» ( ✂), яку я хотів би відображати вказуючи ліворуч та праворуч.

Для цього можна використовувати перетворення 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);

А вертикальний фліп передбачав би масштабування діва так:

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

Що, мабуть, ще більш зрозуміло і зрозуміло.

EDIT: Схоже, він не працює на 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? для отримання детальної інформації

Ще один приклад, як персонаж можна було перевернути. Додайте префікси постачальника, якщо вони потрібні, але поки що всі сучасні браузери підтримують нефіксовану властивість перетворення. Єдиним винятком є ​​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» та «font-awesome» :

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

А потім на цільовий елемент:

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