Περιστροφή κειμένου - 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 μοίρες αντίστοιχα.

Δείτε επίσης αυτήν την ανάρτηση ιστολογίου σχετικά με πλαϊνές κεφαλίδες.

Δείτε το Pen
Sideways Headers του Chris Coyier (@chriscoyier)
στο CodePen.

Δείτε το Pen
Sideways Header Rotation από τον Graham Clark (@Cheesetoast)
στο CodePen.