Verwandeln Sie den Ursprung relativ zum Container. Gedrehter Text

8

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%     
egr103 10.02.2015, 15:48
quelle

2 Antworten

10

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:

HTML

%Vor%

CSS

%Vor%

Hier ist ein Stift .

    
Nils Kaspersson 10.02.2015, 16:53
quelle
2

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%

Geige

    
vals 10.02.2015 17:36
quelle

Tags und Links