Wenn Sie nach einer Möglichkeit suchen, Text vertikal zu setzen, ist CSS writing-mode wahrscheinlich Ihre beste Wahl.
Wenn Sie einfach nur Text drehen möchten, können Sie ganze Elemente wie folgt drehen, was sie um 90 Grad gegen den Uhrzeigersinn dreht
.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);
}Die rotation-Eigenschaft des BasicImage-Filters von Internet Explorer kann einen von vier Werten annehmen: 0, 1, 2 oder 3, die das Element um 0, 90, 180 oder 270 Grad drehen.
Siehe auch diesen Blogbeitrag über seitliche Überschriften.
Siehe den Pen
Sideways Headers von Chris Coyier (@chriscoyier)
auf CodePen.
Siehe den Pen
Sideways Header Rotation von Graham Clark (@Cheesetoast)
auf CodePen.
Könnte ich etwas in IE um z. B. 5 oder 10 Grad drehen?
Ja, aber in IE6 müssten Sie JavaScript verwenden.
Dieser Thread enthält viele Informationen dazu.
Ich verwende jedoch jQuery dafür, da es ein sehr schönes Plugin gibt.
Tatsächlich müssen Sie kein JavaScript verwenden, damit dies in IE funktioniert. Sie könnten den Matrix-Filter von IE verwenden!
Ups, ich wollte meinen Kommentar hier oben einfügen... aber er ist ganz unten. Im Grunde schlage ich die Verwendung von CSS3Please vor.
Ja, das geht. Um 10 Grad zu drehen, verwenden Sie einfach 10 * 1/90, was ungefähr 0,11 entspricht.
Wie dreht man um 45 Grad?
Ich glaube, das ist kein großes Problem für clevere Browser, Sie können CSS3 rotate verwenden, aber für zurückgebliebene Browser müssen Sie
5 Grad
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.99, M12=-0.08, M21=0.08, M22=0.99, SizingMethod="auto expand");
m11 = sin (5 * pi / 180)
m12 = cos (5 * pi / 180)
m21 = cos (5 * pi/ 180)
m22 = sin (5 * pi / 180)
Für IE-Beispiele können Sie hier eine Fiddle überprüfen
http://jsfiddle.net/pv8sH/
Hallo, Sean Hood, um Ihre Frage zu beantworten, nein. Das können Sie nicht. Sie können jedoch etwas in IE um z. B. 7 Grad drehen. Das ist VIEL vernünftiger.
Großartig, Mann, das funktioniert auch für Bilder, wir können es für Bilder mit abgerundeten Ecken verwenden, um das einzelne Bild zu drehen.
CSS-Rotation funktioniert nicht in IE 7 oder IE 7-.
Danke, das ist genau das, was ich brauchte.
Sie haben Opera vergessen: -o-transform:rotate(90deg);
Es ist schön! Vielen Dank!
"Transformie ist ein JavaScript-Plugin, das weniger als 5 KB groß ist, das Sie in Webseiten einbetten und das Ihnen CSS Transforms bietet, indem es die native IE Filter API auf CSS Transitions abbildet, wie von Webkit vorgeschlagen."
https://github.com/pbakaus/transformie
Hey, Opera sollte auch auf dieser Liste stehen... Prost!
-o-transform: rotate(-90deg);
ICH HABE ES NICHT VERSTANDEN..
Keine Möglichkeit, andere Winkel als 90/180/270 in IE zu drehen?
Ich habe den Text gedreht und er funktioniert in IE, aber der Text sieht unscharf aus und sieht einfach nicht gut aus. Gibt es eine Möglichkeit, das zu verhindern?
Versuchen Sie
zoom:1;
background-color: Ihre Farbe.
Ein großes Problem hierbei ist, dass das Attribut filter sehr ineffizient ist. Zum Beispiel ist das Animieren des Randes eines Elements mit einem Filter oder von Kindelementen mit einem Filter auf den besten Maschinen unglaublich ruckelig.
Ich bin kürzlich auf ein Problem gestoßen und brauche wirklich eine schnellere Methode, um Text für dieses Projekt zu drehen, vielleicht Cufon.
Hallo Chris,
Könnten Sie erklären, wie das für Google Chrome gemacht werden sollte? Ich habe Chrome auf meinem Computer installiert. Es funktioniert nicht mit dem obigen Code.
Danke.
Kenchappagoudra
@ SAM JARVIS
Ihre Antwort hat für mich funktioniert... großartige Sache, Kumpel :)))
ngfnfggf
Ich versuche, Text Rotation für meine Beispielseite zu verwenden http://www.pcservices-au.com/accordion_effect.htm. Der Text kann perfekt gedreht werden, aber ich habe ein Problem: Der Text bricht immer wieder in neue Zeilen um. Ich kann keine Lösung finden. Hat jemand eine Idee? Ich wäre Ihnen wirklich dankbar. Sie können den Link überprüfen und sehen meine Probleme.
Versuchen Sie zu verwenden
white-space:nowrap;Vielen Dank, Why CSS (Michael Fokken). Es funktioniert perfekt.
aber es wird nicht in Internet Explorer (alle Versionen) unterstützt
Es ist großartig, dass diese CSS3-Eigenschaften endlich Fortschritte machen, was die Browserunterstützung angeht, sogar IE holt auf, was großartig ist!
Wenn Sie wie viele Entwickler Schwierigkeiten haben, sich jedes kleine Detail (z. B. alle albernen Präfix-Versionen für jeden Browser) bei den neuen CSS3-Operatoren zu merken, dann kann es nützlich sein, einen der im Internet verfügbaren CSS-Generatoren zu verwenden. Für Transform prüfe ich oft http://www.cssrotate.com
Chris, Ihr „filter: progid: …“ zerstört IE9 SP1 aktuell
Symptom: (habe Apple noch nicht getestet...) win7-64, ein paar Details von vielen
Kein Problem beim Vorschauen der Rotation von Xweb4-Vorschau, bis die HTML-Datei aus dem Explorer geöffnet wird
Dann wird der gedrehte Text (in unserem Fall ein kleines Wort) wie im CSS codiert angezeigt: 10px "Wort"
Aber das CSS-gedrehte Tag ist eine große schwarze Box, die 80% des Browserfensters füllt
Neuinstallation von IE und Xweb und das durch den Explorer ausgelöste Problem verschwindet nicht
Explorer beschädigt Fenster, Vorschauen, Favoriten usw. permanent, die gleiche grobe Beschädigung
Entfernen Sie "filter: progid: …" und die Beschädigung ist weg, aber die anfängliche nicht-beschädigte Anzeige? Rückstände?
das erfordert eine genauere Betrachtung — hoffentlich kein Problem für Sie, aber diese Seite ist jetzt berühmt — lol
Symantec und ich werden dies mit den win-ie-Entwicklerteams genauer untersuchen
in etwa 6 Stunden, css-tricks.com/snippets/css/text-rotation /wird Ratschläge geben /Marke ~tx
ps hoffen Sie nicht, dass die Entwicklung oder Forschung eine sichere Alternative bietet? ;o(
Ich habe den Code auf meiner Website ausprobiert, er funktioniert nicht in IE 9. Wenn ich ihn lokal ansehe, sieht er gut aus, aber wenn ich ihn online hochlade, wird er nicht wie lokal angezeigt.
Wissen Sie, was das Problem ist?
später Kommentar, aber versuchen Sie, dies vor "filter: …" hinzuzufügen
[if lte IE 8] damit Ihre CSS-Zeile so aussieht:
[if lte IE 8] filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
schön!! Danke :)
Gibt es eine Möglichkeit, den Winkel zu erhalten, um den ein Element gedreht wird? Ich würde einen Weg mit jQuery bevorzugen.
Beispiel
Für den obigen Code möchte ich so etwas tun:
var angle = $(".rotate").getRotateAngle(); console.log(angle); // Should print -90Siehe: https://css-tricks.de/get-value-of-css-rotation-through-javascript/
Ich denke, der einfachste Weg, das CSS für gedrehten Text herauszufinden, ist die Verwendung von CSS3Please... es liefert sogar den IE-Matrixfilter, sodass Sie ihn nicht selbst berechnen müssen. Hier ist ein Beispiel
Es funktioniert nicht, als ich es für IE7 und 8 ausprobiert habe. Irgendwelche Hilfe?
Hallo zusammen,
Ich erstelle E-Books und habe versucht, einen Block mit Hintergrund und Text darin zu drehen (iBooks nimmt einige CSS3). Es funktioniert gut, außer dass (es ist eine Schande für ein Buch!) der Text wackelt, so als ob er einer Welle folgen würde... Kann mir jemand helfen?
Hier ist mein CSS-Code
{
.encadregris_turn{
font-family: "HelveticaNeue-Italic", sans-serif;
font-size: 0.9em;
padding: 0.8em;
color: #624a30;
float: right;
width: 55%;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-epub-transform: rotate(2deg);
margin-top: 1.2em;
}
Was ist der Unterschied zwischen "IE" und "Internet Explorer" in diesem Beispiel?
Wenn ich einen davon weglassen kann, möchte ich das wirklich tun, da IE6 jetzt tot ist.
Haben Sie eine Idee, wie man das in ein einzelnes HTML-Tag einfügt?
Es scheint, dass die Verwendung sowohl des -ms-Präfixes als auch des filter-Attributs den Effekt in IE9 verdoppelt (zumindest bei mir). Wenn Sie die Zeile mit dem -ms-Präfix weglassen, behebt dies das Problem für mich, und die Filterfunktion funktioniert auch in IE9 gut.
Das ist ein sehr gutes Beispiel. Danke
Ich habe festgestellt, dass der Text im Druckmodus von IE nicht als gedreht dargestellt wird.
Gibt es eine Lösung dafür?
Problem, das ich mit der IE-Rotation habe. Dies dreht den Text, aber "Microsoft.BasicImage" wandelt ihn in ein Bild um, was den Link bricht.
Dies ist ein einfaches und nützliches Werkzeug, um CSS3's Transform
in IE-Filter zu konvertieren: http://www.useragentman.com/IETransformsTranslator/
Der Code funktioniert sehr gut. Aber wenn der Text lang ist, ohne Leerzeichen, geht er über den Rand der Zelle hinaus!! Wie kann man das verhindern? Wie kann man die Zellen entsprechend dem Inhalt vergrößern?
Weiß jemand, ob es möglich ist, in EPUB (bei der Arbeit mit Adobe Digital Editions) um (180 Grad) zu drehen? Danke.
Danke für Ihre Teilen ^^
Kann ich nur einen Charakter drehen? Ich verwende einen nach oben gerichteten Pfeil im Text (↑), möchte ihn aber bei 45 Grad zeigen, wenn möglich. Vielen Dank für jede Hilfe!
:)
Umschließen Sie einfach das Zeichen, das Sie drehen möchten, mit einem >Span< und fügen Sie die Klasse .rotate zum Span hinzu. Wenn Sie das Span nicht hinzufügen können, weil Sie aus irgendeinem Grund keinen Zugriff auf das HTML haben, könnten Sie etwas wie Dave Ruperts Lettering.js verwenden.
Hat super funktioniert, danke!
Toller Artikel! Es sieht so aus, als ob die IE-Transformation für neuere IE-Versionen nicht mehr benötigt wird und das -o-Präfix für neuere Opera-Versionen möglicherweise ebenfalls nicht mehr benötigt wird.
Bitte schlagen Sie eine 45-Grad-Drehung für IE -7,8 vor.
Hören Sie BITTE auf, einige Dinge als "IE-kompatibel" und andere als "Internet Explorer-kompatibel" zu markieren, um sie als 2 verschiedene Dinge zu zählen.
Ugh.
Kann IE bitte einfach sterben!? Oder ganz von Webkit funktionieren? Ernsthaft, ich möchte mich nicht einmal mit dem Coding für all die Bugs in IE befassen.
Weiß jemand eine Lösung, die es erlaubt, Filter beim Drucken auf PDF zu rendern? IE rendert die Drehung einwandfrei, aber wenn ich IE8 oder IE7 verwende, wird die filter-Eigenschaft im PDF-Druck nicht korrekt gerendert. Danke
Danke! Aber aus irgendeinem Grund hat sich in IE9 der Text um 180 Grad gedreht und hat einen schwarzen Hintergrund
http://monosnap.com/image/GNYC0ztxiHW1y5LzfohBgowZUA5lGu
In IE8 und anderen Browsern sieht es gut aus
http://monosnap.com/image/cgV0mFulOBstulAvjtoBXvAeNJI8Ry
Irgendwelche Tipps?
danke
Funktioniert das auch bei Bildern?
Können Sie die Kompatibilität bestätigen? D.h. seit welcher Version sind all diese Rotations-CSS unterstützt/wurden sie unterstützt.
Ich glaube, der Beitrag ist ziemlich veraltet und bezieht sich auf frühere Versionen von Transform in CSS3.
Haben Sie eine Idee bezüglich Adobe Digital Edition und IPAD zur Unterstützung von CSS für gedrehten Text.
Die Rotation funktioniert in IE8 nicht. Können Sie mir bitte sagen, was das Problem ist?
Nur ein Vorschlag... aber was wäre, wenn Sie die Rotation von Anfang an selbst einstellen (auf 0) ... und dann, wenn Sie sie lesen/bearbeiten möchten, verwenden Sie einfach document.style.
Nun, jetzt weiß ich, dass ich ziemlich spät dran bin, aber gibt es eine Möglichkeit, nur einen Teil eines Textes wie diesen in CSS zu drehen? ".om-os-btn:after{
content: " ᐳ";
font-size: 12px;
transform: rotate(-90deg);
}”
Ich habe wirklich Schwierigkeiten, das richtige Symbol dafür zu finden, aber dann habe ich Folgendes versucht, was auch nicht funktionierte...
Sie könnten in Erwägung ziehen, stattdessen
writing-modezu verwenden, wenn Sie vertikalen Text wünschen. Eine Idee ist, den Text, den Sie drehen möchten, in ein >Span< zu packen und dann `writing-mode` auf `vertical-rl` zu setzen. Sie können immer noch den `transform`-Weg gehen — das Einzige, woran Sie denken sollten, ist, auch `transforn-origin` zu setzen, um die Position der Drehung festzulegen.