Использование CSS для зеркального отражения текста

Можно ли манипулировать текстом с помощью CSS, чтобы он выглядел зеркальным или перевернутым? Например, мы можем захотеть отобразить символ ножниц «✂», обращенный влево, а не вправо.

Преобразования CSS на помощь

Преобразования CSS позволяют добиться этот эффект. Чтобы перевернуть текст по горизонтали, измените отрицательное масштабирование элемента по оси X:

``
-moz-transform: Scale(-1, 1);
-webkit-transform: Scale(- 1, 1);
-o-transform: масштаб(-1, 1);
-ms-transform: масштаб(-1, 1);
transform: масштаб(-1, 1);
``

Чтобы перевернуть текст по вертикали, масштабируйте элемент в отрицательном направлении по оси Y:

``
-moz-transform: масштаб(1, -1);
-webkit-transform: масштаб(1, -1);
-o-transform: масштаб(1, -1);
-ms-transform: масштаб(1, -1);
transform: масштаб(1, -1);
``

Демонстрация

Вот как использовать эти преобразования на практике:

span{ display: inline-block; margin:1em; } 
.flip_H{ transform: scale(-1, 1); color:red; }
.flip_V{ transform: scale(1, -1); color:green; }

Demo text ✂
Demo text ✂

Добавляя к элементам соответствующие классы .flip_H или .flip_V, вы можете легко переворачивать текст по горизонтали или по вертикали.