Tekstrotasjon - CSS-triks

Anonim

Hvis det du leter etter er en måte å angi type vertikalt, er det best å sannsynligvis CSS writing-mode.

Hvis du bare prøver å snu litt tekst, kan du rotere hele elementene slik, som roterer den 90 grader mot klokken:

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

Rotasjonsegenskapen til Internet Explorer's BasicImage-filter kan akseptere en av fire verdier: 0, 1, 2 eller 3 som vil rotere henholdsvis 0, 90, 180 eller 270 grader.

Se også dette blogginnlegget om sidehodeoverskrifter.

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

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