Поворот текста - CSS-хитрости

Anonim

Если вы ищете способ вертикальной установки шрифта, лучше всего использовать CSS writing-mode.

Если вы просто пытаетесь повернуть какой-то текст, вы можете вращать целые элементы, как это, что поворачивает его на 90 градусов против часовой стрелки:

.rotate ( transform: rotate(-90deg); /* Legacy vendor prefixes that you probably don't need… */ /* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg); /* IE */ -ms-transform: rotate(-90deg); /* Opera */ -o-transform: rotate(-90deg); /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); )

Свойство вращения фильтра BasicImage Internet Explorer может принимать одно из четырех значений: 0, 1, 2 или 3, которые поворачивают элемент на 0, 90, 180 или 270 градусов соответственно.

Также см. Это сообщение в блоге о боковых заголовках.

См.
Заголовки Pen Sideways Headers Криса Койера (@chriscoyier)
на CodePen.

См. Статью
Грэма Кларка (@Cheesetoast)
о вращении заголовка на стороне пера на CodePen.