Drehen und übersetzen

Question

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

CSS:

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

Die HTML ist einfach nur Text.

Answer 1

Der Grund ist, weil Sie die Transform Eigenschaft zweimal verwenden. Aufgrund von CSS-Regeln mit der Kaskade gewinnt die letzte Deklaration, wenn sie die gleiche Spezifität haben. Da sich beide Transformationsdeklarationen in derselben Regel befinden, ist dies der Fall.

Was es tut, ist dies:

1. den Text um 90 Grad drehen. OK.
2. übersetzen 50% bis 50%. Ok, das ist die gleiche Eigenschaft als Schritt ein, so dass dieser Schritt tun und ignorieren Schritt 1.

http://jsfiddle.net/Lx76Y/ See und es im Debugger öffnen, um die erste Erklärung

Als übersetzen überschrieben zu sehen ist das Überschreiben des drehen , müssen Sie sie in der gleichen Erklärung kombinieren statt: http://jsfiddle.net/Lx76Y/1/

um dies zu tun, um eine durch Leerzeichen getrennte Liste von Transformationen verwenden:

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

Re Mitglied, dass sie in einer Kette angegeben sind, so wird die Übersetzung zuerst angewendet, dann die Drehung danach.

Answer 2

Dies ist nicht notwendig, da Sie css 'Schreibmodus' mit den Werten 'vertical-lr' oder 'vertical-rl' wie gewünscht verwenden können.

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

Answer 3

Etwas, das erhalten verpasst kann: in meinem Verkettungs Projekt, wird es auch eine durch Leerzeichen getrennte Liste heraus am Ende ein Leerzeichen getrennt Semikolon muss.

Mit anderen Worten, funktioniert das nicht:

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

aber dies tut:

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

Answer 4

ich nicht so hier geht kommentieren. Über @David Storey antworten.

Achten Sie auf die "Reihenfolge der Ausführung" in CSS3 Ketten! Die Regel ist (rechts) von (links). Nicht von links nach rechts.

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

Die Operation "rotieren" wird zuerst durchgeführt, dann kommt die Operation "translate" als nächste/Sekunde.

Siehe: CSS3 transform order matters: rightmost operation first