Wie man HTML Horizontal zu vertikal kippen

Die meisten Webseiten sind logisch, so formatiert, dass von links nach rechts und von oben nach unten gelesen. Aber für einige Designs ist es nützlich, Text läuft seitwärts, die unten auf dem Bildschirm nach oben oder von oben nach unten haben zu können. Es ist einfach, diesen Effekt mit Text-Grafiken zu imitieren, aber Sie verlieren einige des dynamischen Potentials Textfeldern sowie die Fähigkeit, kopieren und Einfügen des gekippten Textes in anderen Textfeldern. Eine Möglichkeit ist vorhanden, um Text aus mithilfe von horizontal auf vertikal kippen HTML-Programmierung.

Anweisungen

1 Umschließen Sie den Text, den Sie in einem Span-Tag kippen wollen.

Beispiel: < Span > Flipped Text < / span >

2 Legen Sie einen Webkit-Transform-Befehl kippen Sie den Text für Safari-Benutzer. Verwenden Sie-90, um den Text aus dem unteren Bildschirmrand oben und 90 den Text läuft von oben nach unten ausgeführt haben. Verwenden Sie ein Semikolon, um dieser Befehl von folgenden Browser-spezifischen Befehle zu trennen.

Beispiel:

< span - Webkit-Transform: rotate(-90deg); > gekippt Text < / span >

3 Mit Mozillas Browser-spezifischen Präfix einen zweiten Transform-Code einfügen.

Beispiel:

< span - Webkit-Transform: rotate(-90deg); -Moz-Transform: rotate(-90deg); > gekippt Text < / span >

4 Legen Sie einen BasicImage-Filter, um den Text für Benutzer des Internet Explorers zu kippen. In diesem Fall der Drehungswert 3 läuft des Textes von unten nach oben und 1 läuft des Textes von oben nach unten.

Beispiel:

< span - Webkit-Transform: rotate(-90deg); -Moz-Transform: rotate(-90deg); Filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); > gekippt Text < / span >

Tipps & Warnungen

• Testen Sie Ihren Code in so vielen Browsern wie möglich sicherzustellen, dass Sie Recht haben. Auch wenn es vielleicht einige geringfügigen Änderungen von Browser zu Browser, stellt dieses Setup sicher, dass die größte Zahl von Browsern möglich den Text sehen, wie Sie gesehen werden wollen.
• Verwenden Sie gekippte Text sparsam. Ältere Browsern möglicherweise nicht ordnungsgemäß gerendert, und keine aktuelle Methode vorhanden für spiegeln Text in Netscape-Browsern überhaupt.