трансформация

Трансформация

Следующая глава из книги Шэя Хоу, посвящённая трансформации элементов. Читать всем, тема модная!

Направление текста

Мы привыкли читать тексты слева направо, для нас это кажется привычным и естественным. В то же время есть языки, где писать надо справа налево, например, в арабском письме. Кроме того изредка возникают задачи, когда текст надо повернуть, отразить или ещё как-то представить непривычным образом. Гугл так пошутил на первое апреля и показал оборотную сторону своего поисковика (рис. 1).

Google. Вид сзади

Рис. 1. Google. Вид сзади

Слава CSS, задавать направление текста весьма легко и это делается буквально парой свойств, так что можно экспериментировать вволю.

Как отразить изображение?

Для отражения изображения или другого элемента, в том числе текстового, применяется свойство transform и функция scale() с отрицательным значением. Варианты такие:

  • transform: scale(-1, 1) — отражение по горизонтали;
  • transform: scale(1, -1) — отражение по вертикали;
  • transform: scale(-1, -1) — одновременное отражение по горизонтали и вертикали.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.