Wie kann man Text mithilfe von CSS in verschiedenen Browsern vertikal drehen?

Text vertikal mit CSS drehen

Um eine browserübergreifende vertikale Textrotation zu erreichen, sind browserspezifische Lösungen erforderlich. Für Browser, die CSS3-Transformationen unterstützen, kann rotieren() verwendet werden.

CSS3-Transformation:

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

Dieser Code dreht den Text um 90 Grad gegen den Uhrzeigersinn und verankert die Drehung in die Mitte des Textes.

Filtern nach IE:

Für IE-Versionen 5.5 und höher kann die Filtereigenschaft verwendet werden:

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

Der Wert rotation=3 dreht den Text um 270 Grad gegen den Uhrzeigersinn.

moz-transform für Firefox:

Für Firefox 3.5 und später wird -moz-transform verwendet:

.rot-neg-90 {
  -moz-transform: rotate(270deg);
  -moz-transform-origin: 50% 50%;
}

-webkit-transform für Safari/Webkit:

Für Safari- und Webkit-Browser ist -webkit-transform Verwendet:

.rot-neg-90 {
  -webkit-transform: rotate(270deg);
  -webkit-transform-origin: 50% 50%;
}

Browser Unterstützung:

Diese Lösungen bieten browserübergreifende Unterstützung für die vertikale Textrotation in IE6, Firefox 2, Chrome, Safari und Opera.

Das obige ist der detaillierte Inhalt vonWie kann man Text mithilfe von CSS in verschiedenen Browsern vertikal drehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!