Ich brauche Hilfe, um zu verstehen, wie transform-origin
funktioniert. Ich habe mein Googling durchgeführt, kann aber nichts finden, was meinem speziellen Anwendungsfall helfen könnte. Hier ist, was ich versuche zu erreichen:
Ich habe eine feste Fußzeile mit einer festen Höhe, innerhalb derer ich zwei Zeilen rotierten Text habe (linke Spalte), wie kann ich die vollständige Kontrolle über seine Positionierung bekommen? Im Moment, wo es oben in der Fußzeile beginnt und sich ganz außerhalb der Fußzeile befindet, habe ich eine Fiedel eingerichtet, um meinen aktuellen Code anzuzeigen: Ссылка
Hat jemand Ideen, wie ich erreichen kann, was ich will?
%Vor% Denken Sie daran, transform-origin
so einzustellen, dass ein Nagel in den Block geschlagen wird. A transform-origin: right bottom
dreht das Element um seine untere rechte Ecke.
Die 2d-Syntax lautet: transform-origin: x y
, wobei 0 0
ist left top
und 100% 100%
ist right bottom
.
Wie für das vorliegende Problem; Anstatt die eigentlichen Textelemente zu drehen, würde ich sie in ein anderes Element einfügen und dieses Element um seine obere rechte Ecke drehen. Dann wickle das Element auf ein anderes Element und verschiebe das Element 100% seiner Breite zurück nach links. Dieses Element kann dann wie gewohnt positioniert werden.
Damit können Sie Elemente stapeln und aus dem Content-Flow herausnehmen, wenn Sie möchten.
Das würde ungefähr so aussehen:
Dein Problem ist, dass es keinen Transform-Ursprung gibt, der dir geben kann, was du willst.
Wenn sich Ihr Transformationsursprung links vom Div befindet, können Sie sie ausrichten, wenn es in Ordnung ist, wenn sie nach unten gehen . (rotierende 90deg statt -90deg).
Und wenn Sie den Transformationsursprung rechts vom div setzen, da die rechten Enden nicht ausgerichtet sind, wird es ein Chaos.
Am besten fügen Sie der Rotation eine Übersetzung hinzu:
%Vor%Tags und Links css css3 transform css-transforms