Используя свойство 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;
}
Средний
