Wie kann ich Text mit Cross-Browser-Kompatibilität vertikal drehen?

Text vertikal drehen mit Cross-Browser-Unterstützung

Müssen Sie ein einzelnes Wort vertikal anzeigen? Dies kann mit CSS erreicht werden, wodurch die Kompatibilität mit gängigen Browsern wie IE6, Firefox 2 und Chrome sichergestellt wird.

Lösung:

Um Text mit CSS um 90 Grad zu drehen, Befolgen Sie diese Schritte:

1. Definieren Sie eine Klasse mit dem gewünschten CSS Transformationen:

.rotate {
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);

  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
}

2. Wenden Sie die Klasse auf den gewünschten Text an:

<span>

Für ältere Browser:

In älteren Browsern können Sie den folgenden Code für die Matrixtransformation verwenden:

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

Dies dreht den Text in Firefox 3.5 und Safari/WebKit 3.1 um -90 Grad. IE bietet nur begrenzte Matrixunterstützung, ist jedoch komplexer zu implementieren.

Das obige ist der detaillierte Inhalt vonWie kann ich Text mit Cross-Browser-Kompatibilität vertikal drehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!