Textrotation - CSS-tricks

Anonim

Om det du letar efter är ett sätt att ställa in typ vertikalt, är det bäst att förmodligen CSS writing-mode.

Om du bara försöker vända lite text kan du rotera hela element så här, som roterar den 90 grader moturs:

.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); )

Rotationsegenskapen i Internet Explorer's BasicImage-filter kan acceptera ett av fyra värden: 0, 1, 2 eller 3 som kommer att rotera elementet 0, 90, 180 eller 270 grader.

Se även detta blogginlägg om sidhuvud.

Se Pen
Sideways Headers av Chris Coyier (@chriscoyier)
på CodePen.

Se Pen
Sideways Header Rotation av Graham Clark (@Cheesetoast)
på CodePen.