Поворот тексту - 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 градусів відповідно.

Також дивіться цю публікацію в блозі про бокові заголовки.

Перегляньте
заголовки ручки в бік Кріса Койєра (@chriscoyier)
на CodePen.

Дивіться
обертання заголовка ручки вбік від Грехема Кларка (@Cheesetoast)
на CodePen.