Tekstin kierto - CSS-temppuja

Anonim

Jos etsimäsi on tapa asettaa tyyppi vertikaalisesti, olet varma, että se on todennäköisesti CSS writing-mode.

Jos yrität vain kääntää tekstiä, voit kiertää kokonaisia ​​elementtejä näin, mikä kiertää sitä 90 astetta vastapäivään:

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

Internet Explorerin BasicImage-suodattimen kierto-ominaisuus voi hyväksyä yhden neljästä arvosta: 0, 1, 2 tai 3, joka kiertää elementtiä vastaavasti 0, 90, 180 tai 270 astetta.

Katso myös tämä blogiviesti sivuttain olevista otsikoista.

Katso
Chris Coyierin (@chriscoyier)
kynän sivusuunnassa olevat otsikot CodePenissä.

Katso
Graham Clarkin (@Cheesetoast)
kynän sivuttain otsikkokierto CodePenistä.