Betrachten Sie den folgenden Versuch, einen Absatz um 90 Grad zu drehen und ihn so zu positionieren, dass die Ecke, die anfänglich die obere linke Ecke war (und die nach der Drehung zur oberen rechten Ecke wird), oben rechts liegt Ecke des Elternblocks.
HTML:
%Vor%CSS:
%Vor%In Firefox 19.0.2 unter OS X 10.6.8 schlägt es fehl. Dies liegt daran, dass die Transformation trotz der Reihenfolge, in der die CSS-Eigenschaften angegeben wurden, nach der Positionierung auf angewendet wird. Mit anderen Worten, der Browser:
#text so, dass sich seine obere rechte Ecke in der oberen rechten Ecke des übergeordneten Blocks befindet, aber nur dann
Daher wird die transform-origin -Eigenschaft hier nicht verwendet. Wenn zum Beispiel transform-origin: top right; verwendet wird, muss #text um die Breite nach unten verschoben werden, bevor es gedreht wurde.
Meine Frage: Gibt es eine Möglichkeit, dem Browser mitzuteilen, dass er die CSS-Positionierungseigenschaften nach der Rotation anwenden soll; und wenn nicht, dann gibt es stattdessen eine Möglichkeit, #text nach unten zu verschieben (zB mit top: ) um die Breite bevor es gedreht wurde ?
NB. Im Idealfall sollte die Lösung kein festes width: für #text festlegen und kein JavaScript erfordern.
Gelöst: hier
Dies ist der Code, den ich hinzugefügt habe:
%Vor%Ich habe auch einige Präfix-Transformationseigenschaften hinzugefügt, so dass es cross browser
sein wird %Vor%Wie ich es gemacht habe:
Ich habe dies gefunden Frage und, wie der Name der Website sagt, "fiedelte" mit dem Code, um dieses Verhalten zu erhalten. Ich denke, die Lösung ist left: 100%; anstelle von right: 0; .
(das width: 100%; ist da, weil es aus irgendeinem Grund nicht 100% war und der Text in die nächste Zeile übergelaufen wäre)
Vielleicht möchten Sie mit der translate-Option herumspielen, die Sie nach dem Drehen als zweite Transformationsfunktion anwenden können, und Ihr Element genau an der gewünschten Position platzieren. Es gibt keine andere Möglichkeit, dem Browser mitzuteilen, die Positionseigenschaften zu verwenden, nachdem die Transformationsfunktion mit plain css verwendet wurde.
Sehen Sie diese Demo - Ссылка