Drehen und übersetzen

85

Ich habe einige Probleme beim Drehen und Positionieren einer Textzeile. Jetzt funktioniert nur noch die Position. Die Drehung funktioniert auch, aber nur, wenn ich die Positionierung deaktiviere.

CSS:

#rotatedtext {
    transform-origin: left;
    transform: rotate(90deg);
    transform: translate(50%, 50%);
}

Das HTML ist nur einfacher Text.

css webkit transform css-transforms Sera
quelle

Antworten:

150

Der Grund dafür ist, dass Sie die Transformationseigenschaft zweimal verwenden. Aufgrund von CSS-Regeln mit der Kaskade gewinnt die letzte Deklaration, wenn sie dieselbe Spezifität haben. Da sich beide Transformationsdeklarationen im selben Regelsatz befinden, ist dies der Fall.

Was es tut, ist Folgendes:

  1. Drehen Sie den Text um 90 Grad. OK.
  2. 50% mal 50% übersetzen. Ok, dies ist dieselbe Eigenschaft wie in Schritt eins. Führen Sie diesen Schritt aus und ignorieren Sie Schritt 1.

Siehe http://jsfiddle.net/Lx76Y/ und öffnen Sie es im Debugger, um zu sehen, dass die erste Deklaration überschrieben wird

Da die Übersetzung die Drehung überschreibt, müssen Sie sie stattdessen in derselben Deklaration kombinieren: http://jsfiddle.net/Lx76Y/1/

Dazu verwenden Sie eine durch Leerzeichen getrennte Liste von Transformationen:

#rotatedtext {
    transform-origin: left;
    transform: translate(50%, 50%) rotate(90deg) ;
}

Denken Sie daran, dass sie in einer Kette angegeben sind. Daher wird zuerst die Übersetzung angewendet und danach die Drehung.

David Storey
quelle
22
Ich habe festgestellt, dass die Verkettung sehr wichtig ist. Vergleichen Sie eine Übersetzung gefolgt von einer Rotation - jsfiddle.net/Mrjm8/3 - mit einer Rotation gefolgt von einer Übersetzung - jsfiddle.net/Mrjm8/2
Luke
Wie funktioniert das, wenn es in HTML anstelle von CSS geschrieben ist?
JakeTheSnake
2
@JakeTheSnake Das tut es nicht. CSS-Transformationen sind eine CSS-Funktion.
Stijn de Witt
2
Wow Danke. Sie sollten den Verkettungsaspekt kühn machen :) das war ein Schlüsselelement, das viele Blogs und Spezifikationen nie erwähnen!
Cgatian
@ Luke Danke, dass du darauf hingewiesen hast , die Reihenfolge ist wirklich wichtig!
Yami Odymel
11

Ich kann nicht kommentieren, also hier geht. Über @ David Storey Antwort.

Seien Sie vorsichtig bei der "Ausführungsreihenfolge" in CSS3-Ketten! Die Reihenfolge ist von rechts nach links, nicht von links nach rechts.

transformation: translate(0,10%) rotate(25deg);

Die rotateOperation wird zuerst durchgeführt, dann die translate.

Siehe: CSS3-Transformationsreihenfolge ist wichtig: Operation ganz rechts zuerst

darthRods
quelle
4

Dies ist nicht erforderlich, da Sie den CSS-Schreibmodus mit den Werten 'vertikal-lr' oder 'vertikal-rl' nach Wunsch verwenden können.

.item {
  writing-mode: vertical-rl;
}

CSS: Schreibmodus

Biojazzard
quelle
2

Etwas, das möglicherweise übersehen wird: In meinem Verkettungsprojekt stellt sich heraus, dass eine durch Leerzeichen getrennte Liste am Ende auch ein durch Leerzeichen getrenntes Semikolon benötigt.

Mit anderen Worten, das funktioniert nicht:

transform: translate(50%, 50%) rotate(90deg);

aber das tut:

transform: translate(50%, 50%) rotate(90deg) ; //has a space before ";"
Brian Coyle
quelle