Tekst draaien - CSS-trucs

Anonim

Als u op zoek bent naar een manier om het type verticaal in te stellen, kunt u het beste waarschijnlijk CSS gebruiken writing-mode.

Als je alleen maar wat tekst probeert te draaien, kun je hele elementen op deze manier draaien, waardoor het 90 graden tegen de klok in draait:

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

De rotatie-eigenschap van het BasicImage-filter van Internet Explorer kan een van de vier waarden accepteren: 0, 1, 2 of 3 waarmee het element respectievelijk 0, 90, 180 of 270 graden wordt gedraaid.

Zie ook deze blogpost over zijwaartse headers.

Zie de Pen
Sideways Headers van Chris Coyier (@chriscoyier)
op CodePen.

Zie de Pen
Sideways Header Rotation door Graham Clark (@Cheesetoast)
op CodePen.