Вертикальный текст — это просто!

Самый простой способ развернуть текст вертикально при помощи CSS.
Наверняка, многие из вас, встречали на страницах сайтов такую фишку, как развернутый текст вертикально. Понятно что банальный перенос строк с использованием тега <br>, добавляя его после каждой буквы, в данном случае не прокатывает. Как же тогда развернуть текст реально, именно развернуть буквы, так чтобы текст читался сверху вниз?
Оказывается всё довольно просто. В спецификации CSS3, для всех популярных браузеров, существует свойство transform, с помощью которого мы можем трансформировать элементы, масштабировать, вращать, сдвигать, наклонять, а также комбинировать все виды трансформаций.

 
Используя свойство transform: rotate(90deg);, можно развернуть текст на 90̊ , т.е. расположить его строго по вертикали, применив другие значения для rotate(), возможно повернуть текст на любой другой угол, а не только на 90̊.
Добавив уникальное свойство transform-origin, установим координаты точки, относительно которой и будет происходить трансформация текста.
 

.vertical-text {
/* Трансформируем текст */
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
/* Координаты точки трансформации */ 
-ms-transform-origin: left top 0;
-moz-transform-origin: left top 0;
-webkit-transform-origin: left top 0;
transform-origin: left top 0;
}

 
Посмотрите живой пример использования. Текст помещён в оформленный контейнер div, развёрнут на 90 градусов (вертикально) и намертво приклеен к левому краю страницы:
 

 
Надеюсь, этот коротенький сниппет, когда-нибудь пригодится в вашей работе. Экспериментируйте с параметрами расположения и оформления текста, а место, где применить на практике, данное решение, думаю найдётся.

С Уважением, Андрей .

Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях: