Как повернуть текст на 90 градусов css

 class="wrapper">  class="text-block"> Hello World!   

.wrapper  width: 300px; margin: 80px; > .text-block h1  transform-origin: top left; transform: rotate(90deg); > 

.vertical_text

.vertical-text < writing-mode: vertical-lr; /* Прощай, горизонтальное однообразие! */ >

.vertical-text-rotated < transform: rotate(90deg); /* Поворачиваем текст на 90 градусов! */ transform-origin: center; >

.vertical-text-rotated < filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); /* Помогаем повернуться старому другу IE! */ >

.vertical-text-rotated < -webkit-transform: rotate(90deg); /* Привет, WebKit! */ -moz-transform: rotate(90deg); /* Вперёд, Mozilla! */ -ms-transform: rotate(90deg); /* Не забываем о старом верном Microsoft */ -o-transform: rotate(90deg); /* И Opera тоже в деле */ transform: rotate(90deg); /* Для новаторов мира браузеров */ >

Несколько 

.rotated < display: inline-block; transform: rotate(90deg); /* Небольшие изюзминки добавляют тексту фишечки! */ >

Горизонтальный текст: Чтение идёт -> �� ------------------------------ Вертикальный текст: �� Т е к с т | Вверх мы идём!

С помощью CSS мы меняем привычное восприятие и переворачиваем представление:

Скопировать код

.vertical-text

В итоге вертикальный текст поднимается вверх, бросая вызов всем правилам, аналогично тому, как наши стили CSS сопротивляются стандартной горизонтальной разметке. ����

Продвинутые приёмы поворота текста

Применение writing-mode для ортогонального управления потоком макета

Переключение между writing-mode: vertical-lr; и writing-mode: vertical-rl; служит для создания ортогональных потоков. В сочетании с text-orientation: upright; это обеспечивает сохранение вертикального положения символов.

Позиционирование после поворота

После поворота текста может потребоваться корректировки. Для этого можно применить абсолютное позиционирование или flexbox для правильного вспомогательного расположения элементов:

Скопировать код

.absolute-positioned-text < position: absolute; /* Поднимаемся на новый уровень с абсолютно позиционированным текстом! */ top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(90deg); >

Особенности дизайна для мобильных устройств

Не стоит забывать о мобильных пользователях! Разные способы ввода и ориентации экрана требуют адаптивного дизайна. Flexbox и grid идеально подходят для создания гибких макетов с вертикальным текстом.

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

1. CSS writing modes – MDN Web Docs — подробный гайд по режимам письма в CSS, включая вертикальные текстовые блоки.
2. Can I use. Support tables for HTML5, CSS3, etc — проверка совместимости браузеров для свойства writing-mode в CSS.
3. CSS transform property – w3schools.com — определения и особенности свойства CSS transform, незаменимого при работе с вертикальным текстом.
4. Transform | CSS-Tricks — глубокий анализ свойства CSS transform с практическими примерами его применения.
5. CSS Writing Modes Level 3 – W3C — ознакомление с официальной спецификацией W3C по режимам письма в CSS, содержащей всесторонние сведения о вертикальном тексте.
6. Examples of vertical text – CodePen — огромное количество живых примеров на CodePen, демонстрирующих различные способы использования вертикального текста в CSS.

Как повернуть текст на 90 градусов в HTML-таблице: reflow

Хотите разнообразить обычную HTML-таблицу нестандартным расположением текста? CSS и его свойства transform: rotate(-90deg) , transform-origin: bottom left и white-space: nowrap помогут в этом. Таким образом вы сможете сделать текст вертикальным, и ячейка таблицы примет соответствующие размеры. Пример:

Скопировать код

  
�� Повернутый текст
 

Примечание: Свойства CSS transform: rotate(-90deg) и transform-origin: bottom left обеспечивают поворот вашего текста вокруг нижнего левого угла, сохраняя его положение в ячейке без изменений.

Работаем с размерами текста

Если размер текста в ваших таблицах периодически меняется, вы всегда можете подобрать размер ячейки под текст с помощью JavaScript. Таким образом, у вас сохранится контроль над пространством таблицы и возможностью подстраивать его под актуальные размеры.

Вертикальные заголовки

Повернутые на 90 градусов заголовки таблиц выглядят очень эффектно. Чтобы добиться этого, используйте элементы и с применением CSS-свойств transform: rotate(-90deg) и white-space: nowrap .

Скопировать код

  Текст-модель ���� 

JavaScript пригодится для подбора ширины ячейки под длину вертикального заголовка.

Совместимость с браузерами

Чтобы поворот текста работал во всех браузерах, используйте вендорные префиксы для свойства transform . К тому же, writing-mode может служить альтернативой для вертикального отображения текста, хоть и несколько отлиается от transform .

//шутка с Reddit: "Почему программисты предпочитают iOS? Потому что в нем нет Windows или Android, от которых хотят убежать, когда код не работает!"

Рекомендации по стилизации текста при вращении

Планируете использовать свои собственные вариации повернутого текста? Вот некоторые советы для достижения эффективных и красивых результатов:

• Играйте с отрицательными полями для точного выравнивания.
• Убирайте или меняйте стили границ ячеек для достижения гармонии.
• Применяйте стили через CSS-классы, чтобы сохранять порядок в коде.

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

Представьте, как сильно меняется обычная таблица, когда текст в ней поворачивается на 90 градусов. Такой текст читается сверху вниз: