Как зеркально отразить текст в CSS: символ ножниц

Быстрый ответ

Да, с помощью CSS можно осуществить зеркальное отражение текста как по горизонтальной, так и по вертикальной оси. Для этого необходимо использовать свойство transform в сочетании с функциями scaleX(-1) для горизонтального и scaleY(-1) для вертикального отражения.

Горизонтальное отражение выполняется следующим образом:

.h-flip { transform: scaleX(-1); } /* Как в зеркале: текст идёт справа налево */

<span class="h-flip">Новый мировой порядок!</span>

Для вертикального отражения код будет выглядеть так:

.v-flip { transform: scaleY(-1); } /* Переворачиваем буквы с ног на голову */

<span class="v-flip">Перевернутая реальность!</span>

Чтобы применить один из эффектов, достаточно присвоить HTML-элементу класс .h-flip или .v-flip.

Продвинутое отражение: поднимаем уровень!

Трансформация на уровне символов: уловите разницу!

Тakже можно трансформировать конкретные символы, задав им inline стили. Установка display в значение inline-block позволит вам увидеть магию в действии:

<span style="transform: scale(-1, 1); display: inline-block; margin-right: 2px;">А</span>БВ готовы к испытаниям

Обратите внимание на то, как буква 'А' теперь отображается задом наперёд. margin-right поможет скорректировать расстояние между символами.

Подробнее об этом расскажет наш спикер на видео

Кроссбраузерность: уважаем все браузеры!

Чтобы поддерживать старые версии браузеров, например IE6-8, используйте специальное свойство filter:

.ie-shuffle {
  filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1); /* И пусть каждый браузер будет учтён! */
}

Не забывайте о разнице в особенностях разных платформ и добавьте к transform необходимые префиксы: -webkit-, -moz-, -o-, -ms-:

.cross-flip {
  -webkit-transform: scaleX(-1); /* Для Chrome и Safari */
  -moz-transform: scaleX(-1); /* Для Firefox */
  -o-transform: scaleX(-1); /* Для Opera */
  -ms-transform: scaleX(-1); /* Для IE9 */
  transform: scaleX(-1); /* Весьма важный базовый код */
}

Финал отражения: покоряем ветру!

Если вы хотите усложнить задачу, добавьте rotate(360deg) к scaleX(-1) или попробуйте matrix() для создания более сложных эффектов:

.flip-360 { transform: rotate(360deg) scaleX(-1); } /* Усложнённый флип: с вращением на 360 градусов! */
.matrix-flip { transform: matrix(-1, 0, 0, 1, 0, 0); } /* Ваш собственный мир трансформаций в матрице! */

Визуализация

Ниже — пример визуализации зеркального отражения текста с помощью CSS, выводя слова так, как если бы они были отражены в воде.

Обычный текст около озера: "Привет!"

Используйте CSS-трансформацию для создания эффекта отражения:

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

Вуаля, вот как выглядят отраженные слова:

Текст у озера, отражённый как в зеркале: "тевирП"

Использование CSS для отражения текста — это словно создание зеркальной поверхности с помощью кода.

Больше деталей: когда отражение становится сложным!

Юникод и HTML: диалог с машинным языком!

Интересно, что комбинирование юникодовской кодировки HTML и свойства CSS transform позволяет создавать ещё более интересные эффекты:

<span style="transform: scaleX(-1); display: inline-block;">&#x202E;</span>

Отступы и выравнивание: не забываем о деталях!

После применения трансформации нужно учесть корректировку отступов для сохранения правильного визуального оформления:

.flippy-spacey {
  transform: scaleX(-1);
  margin-left: 10px;
}

Работаем с flex и grid!

Если ваша разметка использует flexbox или grid, необходимо тщательно отслеживать, как отражение влияет на вёрстку.

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

Визуальное — не всегда понятное!

Зеркальные элементы могут сбивать пользователей с толку. Важно проверять используемость трансформированных элементов.

Выбираем между блоком и строчным элементом!

Элементы с дисплеем inline-block или block лучше подходят для комбинирования с transform:

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

UX всегда важен!

При использовании сложных трансформаций надо всегда помнить о пользовательском опыте и читаемости текста.

Полезные материалы

1. transform | CSS-Tricks — полное руководство по свойству transform, которое станет вашим проводником в мире эффектов отражения.
2. transform – CSS: Cascading Style Sheets | MDN — исчерпывающий обзор свойства transform в CSS от команды Mozilla.
3. Как отразить изображение — пошаговая инструкция для новичков, которые хотят научиться создавать зеркальные отображения изображений.
4. CSS Flip Animation — подробное обучение анимациям отражения с практическими примерами от Дэвида Уолша.
5. Can I use... Support tables for HTML5, CSS3, etc — подробные таблицы для проверки совместимости браузера с 2D-трансформациями CSS.
6. transform | Codrops — ценный справочник по свойству transform с визуализированными примерами и полезными советами.