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

52

Найпростіший спосіб розгорнути текст вертикально за допомогою CSS.
Напевно, багато хто з вас зустрічали на сторінках сайтів таку фішку, як розгорнутий текст вертикально. Зрозуміло що банальний перенесення рядків з використанням тега
, додаючи його після кожної букви, в даному випадку не спрацьовує. Як же тоді розгорнути текст реально, саме розгорнути літери, так щоб текст читався зверху вниз?
Виявляється, все досить просто. У специфікації CSS3, для всіх популярних браузерів, існує transform властивість, за допомогою якого ми можемо трансформувати елементи, масштабувати, обертати, переміщати, нахиляти, а також комбінувати всі види трансформацій.

Вертикальный текст CSS

Використовуючи властивість 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;
}

.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 градусів (вертикально) і намертво приклеєний до лівого краю сторінки:

Сподіваюся, цей коротенький фрагментом, коли-небудь стане в нагоді у вашій роботі. Експериментуйте з параметрами розміщення та оформлення тексту, а місце, де застосувати на практиці, дане рішення, думаю знайдеться.

З Повагою, Андрій .

Буду вдячний, якщо поділитеся посиланням на запис в своїх соціальних мережах: