Wie kann ich mit CSS eine browserübergreifende vertikale Textrotation erreichen?

Cross-Browser Vertical Text Rotation mit CSS

Hintergrund

Viele moderne Websites integrieren Dynamik Inhalt, einschließlich gedrehtem Text. Es stellte jedoch eine Herausforderung dar, konsistenten vertikalen Text in allen Browsern zu erreichen.

Lösung

Um ein Wort um 90 Grad zu drehen, nutzen Sie die Eigenschaft „transformieren“:

.rotate {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;  
}

Browserkompatibilität

Dieser Ansatz unterstützt Major Browser:

• Chrome (beliebige Version)
• Firefox (≥2)
• Safari (≥3.1)
• Opera (≥5)
• IE (≥9)

Hinweis

IE-Versionen vor 9 erfordern die Anwendung einer Filtereigenschaft:

.rotate {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Für Firefox (≥ 3.5) und Webkit (≥3.1), berücksichtigen Sie „-moz-transform“ und „-webkit-transform“, bzw.

Fazit

Die bereitgestellten CSS-Techniken ermöglichen eine browserübergreifende vertikale Textrotation und ermöglichen so eine effiziente und konsistente Inhaltspräsentation.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS eine browserübergreifende vertikale Textrotation erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!