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

Поворот текста в CSS реализуется свойством transform с функцией rotate(). Оно позволяет задать угол наклона элемента в градусах – положительное значение поворачивает текст по часовой стрелке, отрицательное – против. Например, правило transform: rotate(90deg); повернёт текст вертикально вверх, а transform: rotate(-90deg); – вниз.

Чтобы текст не смещался за пределы контейнера, стоит указать transform-origin. Значение center удерживает поворот вокруг центра, top left – от верхнего левого угла. Это особенно важно при создании вертикальных заголовков или меток на графиках.

Для строк текста лучше использовать writing-mode, если требуется изменить направление набора, а не просто повернуть элемент. Например, writing-mode: vertical-rl; выстраивает символы вертикально без искажения пропорций. Комбинация writing-mode и transform даёт точный контроль над ориентацией текста.

При работе с адаптивной вёрсткой нужно учитывать, что повёрнутый текст может выходить за границы блока. Рекомендуется использовать overflow: visible или подбирать размер шрифта и отступы с помощью em или vw. Это обеспечивает корректное отображение текста на любых экранах.

Поворот текста с помощью свойства transform: rotate()

Свойство transform: rotate() позволяет повернуть текстовый элемент на заданный угол вокруг его центра или другой заданной точки. Угол указывается в градусах (deg), радианах (rad), градах (grad) или оборотах (turn).

Пример базового использования:

p {
transform: rotate(45deg);
}

Чтобы задать точку вращения, используется свойство transform-origin. Оно принимает значения по горизонтали и вертикали, например left top или 50% 100%.

p {
transform: rotate(-30deg);
transform-origin: left top;
}

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

p {
transform: rotate(90deg) scale(1.2);
}

Ниже приведена таблица с примерами различных углов и точек вращения:

Пример	CSS-код	Описание
Поворот на 90°	`transform: rotate(90deg);`	Текст повернут вертикально вверх
Поворот на -45°	`transform: rotate(-45deg);`	Текст наклонен влево под углом 45°
Поворот с изменённой точкой	`transform: rotate(30deg); transform-origin: right bottom;`	Вращение происходит относительно нижнего правого угла

Для плавного вращения добавляют переход:

p {
transition: transform 0.3s;
}
p:hover {
transform: rotate(15deg);
}

Такой способ применим ко всем элементам, содержащим текст, включая заголовки, подписи и ссылки.

Использование свойства writing-mode для вертикального текста

Свойство writing-mode управляет направлением потока текста и применяется для создания вертикальных надписей без поворота элементов через transform. Оно особенно полезно для интерфейсов с азиатскими языками, боковых меню и декоративных заголовков.

Основные значения:

horizontal-tb – стандартное горизонтальное направление (слева направо, сверху вниз);
vertical-rl – текст располагается вертикально, строки идут справа налево;
vertical-lr – аналогично, но строки идут слева направо;
sideways-rl и sideways-lr – текст отображается вертикально, но буквы остаются повернутыми в горизонтальном положении.

Пример:

p.vertical {
writing-mode: vertical-rl;
text-orientation: upright;
}

Свойство text-orientation определяет ориентацию символов внутри вертикального текста. Значение upright сохраняет естественное положение букв, а mixed позволяет горизонтальные фрагменты для латиницы и цифр.

Комбинирование transform и translate для точного позиционирования повернутого текста

При повороте текста с помощью свойства transform: rotate() элемент изменяет свою ориентацию, но точка поворота остаётся в центре или в другой заданной позиции. Чтобы сместить повернутый элемент в нужное место, применяется сочетание rotate() и translate().

Пример базового кода:

span {
display: inline-block;
transform: rotate(-45deg) translate(10px, 20px);
transform-origin: left top;
}

Порядок функций в transform имеет значение. Сначала выполняется translate(), затем rotate(). Если требуется противоположное поведение – смещение уже после поворота – порядок нужно поменять:

transform: translate(10px, 20px) rotate(-45deg);

Для точного выравнивания полезно учитывать:

transform-origin определяет ось поворота. Значения left top или center дают разные результаты при одинаковом угле.
Смещения в translate() задаются относительно текущей системы координат, которая уже может быть повернута.
Для контроля позиционирования удобно временно добавить границы через outline или border.

Пример комбинирования для заголовка, повернутого на 90° и выровненного вдоль левого края блока:

h3 {
position: absolute;
left: 0;
top: 50%;
transform: rotate(-90deg) translate(-50%, -100%);
transform-origin: top left;
}

Такая комбинация даёт возможность точно управлять направлением и положением текста без изменения структуры документа.

Поворот отдельных символов внутри текста с помощью span и CSS

Для управления углом поворота отдельных символов удобно использовать тег <span>. Каждый символ помещается в отдельный элемент, что позволяет задать индивидуальное значение свойства transform.

Пример HTML-разметки:

<p>
<span class="rotate5">П</span>
<span class="rotate10">р</span>
<span class="rotate15">и</span>
<span class="rotate20">м</span>
<span class="rotate25">е</span>
<span class="rotate30">р</span>
</p>

CSS для задания углов поворота:

span {
display: inline-block;
transition: transform 0.3s ease;
}
.rotate5 { transform: rotate(5deg); }
.rotate10 { transform: rotate(10deg); }
.rotate15 { transform: rotate(15deg); }
.rotate20 { transform: rotate(20deg); }
.rotate25 { transform: rotate(25deg); }
.rotate30 { transform: rotate(30deg); }

Каждый <span> следует объявлять как inline-block, иначе свойство transform не сработает. Для плавного эффекта можно добавить переход. Если требуется повернуть символы программно, применяйте JavaScript для автоматического оборачивания каждой буквы в span и добавления классов с нужными углами.

Такой способ применим к любым шрифтам, поддерживающим стандартные CSS-преобразования, и не искажает верстку, поскольку не влияет на поток документа.

Создание анимированного вращения текста при наведении

Для анимации вращения достаточно применить свойство transform с функцией rotate() и добавить плавный переход через transition. Эффект создаётся при помощи псевдокласса :hover, который изменяет угол поворота при наведении курсора.

Пример:

span {
display: inline-block;
transition: transform 0.4s ease;
}
span:hover {
transform: rotate(360deg);
}

Анимация работает только для элементов, которые ведут себя как блочные. Поэтому display: inline-block; обязателен для корректного вращения. Время и тип перехода можно регулировать через параметры transition. Для более выразительного эффекта можно использовать transform-origin, задавая точку вращения, например center или left top.

Если нужно повторять вращение при каждом наведении, стоит избегать анимаций через @keyframes и использовать только transform – так текст будет возвращаться в исходное положение автоматически.

Коррекция выравнивания и межстрочных интервалов после поворота текста

После применения свойства transform: rotate() текст может смещаться относительно контейнера и терять привычное визуальное распределение строк. Для исправления этого используют комбинацию CSS-свойств, отвечающих за позиционирование и межстрочные интервалы.

Выравнивание по оси X и Y: Свойства text-align и vertical-align позволяют регулировать горизонтальное и вертикальное смещение текста. Например, для текста, повернутого на 90°, горизонтальное выравнивание часто нужно задавать через text-align: center;, а вертикальное смещение корректировать с помощью position: relative; top: -50%;.
Контроль межстрочных интервалов: Свойство line-height работает иначе при вращении текста. Для вертикально ориентированного текста рекомендуется уменьшать значение line-height на 10–20% относительно исходного, чтобы строки не перекрывались.
Использование writing-mode: При вертикальном тексте (writing-mode: vertical-rl; или vertical-lr) стандартное line-height сохраняет читаемость, а выравнивание по горизонтали корректируется через text-align в сочетании с padding или margin.

Пример корректировки для поворота на 90°:

.rotated-text {
transform: rotate(90deg);
text-align: center;
line-height: 1.2;
position: relative;
top: -50%;
}

Для сложных макетов с несколькими повернутыми блоками рекомендуется использовать flexbox или grid для точного выравнивания, чтобы избежать перекрытия текста и сохранить равномерные интервалы между строками.

Регулировка letter-spacing может потребоваться для компенсации визуального сжатия или растяжения символов после поворота. Обычно достаточно 1–2px для небольших блоков текста.

Совмещение transform с корректировкой line-height, text-align и position обеспечивает аккуратное расположение текста независимо от угла поворота.

Вопрос-ответ:

Как повернуть текст на 90 градусов с помощью CSS?

Для поворота текста используется свойство transform. Чтобы повернуть текст на 90 градусов по часовой стрелке, можно написать: transform: rotate(90deg);. Это свойство применяется к элементу, содержащему текст, например к <div> или <span>. Важно помнить, что элемент может изменить свою ширину и высоту после трансформации, поэтому иногда требуется корректировка display или width/height.

Можно ли повернуть текст только внутри строки, не влияя на соседние элементы?

Да, можно. Для этого текст помещают в отдельный элемент, например <span>, и применяют к нему transform: rotate(угол);. Остальные элементы в строке остаются на месте. Если нужен точный контроль позиции повернутого текста, полезно использовать display: inline-block; или position: relative; для обертки, чтобы трансформация не сдвигала соседние элементы.

Как сделать так, чтобы текст повернулся плавно при наведении курсора?

Для плавного поворота используют CSS-переходы. Например, добавьте к элементу transition: transform 0.5s;. Затем при наведении: :hover { transform: rotate(180deg); }. В результате текст будет постепенно вращаться до указанного угла за полсекунды. Можно регулировать скорость и тип движения, изменяя параметры transition.

Влияет ли поворот текста на его читаемость на разных устройствах?

Да, угол поворота может затруднять чтение, особенно на маленьких экранах или при большом угле. Текст, повернутый на 90 или 270 градусов, иногда тяжело воспринимается без прокрутки или изменения ориентации экрана. Чтобы сохранить удобство чтения, лучше использовать небольшие углы поворота для декоративных элементов или ограничивать их на мобильных устройствах через медиа-запросы.

Можно ли комбинировать поворот текста с другими трансформациями, например масштабированием?

Да, CSS позволяет применять несколько трансформаций одновременно через свойство transform. Например: transform: rotate(45deg) scale(1.2);. Сначала выполняется поворот, затем масштабирование. Порядок трансформаций важен, так как меняет конечный результат. Если нужно более точное позиционирование, полезно использовать обертки для отдельных эффектов.