CSS 3: Textrotationsfehler?

7

Ich verstehe nicht, wie die Textdrehung in CSS3 funktioniert.

Zum Beispiel können Sie es hier hier sehen, der gedrehte Text ist nie an der richtigen Stelle, wie Sie es wollen,

> %Vor%

es wird immer die Lücke / den Rand auf der rechten Seite haben. und immer am Ende der Box, die es enthält, überrannt.

Wie kann ich das beheben?

Kann ich jquery verwenden, um es oder irgendein zuverlässiges jQuery-Plugin für die Textdrehung da draußen zu reparieren?

Danke.

    
laukok 02.06.2011, 14:19
quelle

2 Antworten

19

Das Positionieren des Textes ist nicht sehr schwierig, wenn Sie feststellen, dass Sie den Drehpunkt durch ...

steuern können %Vor%

In Ihrem speziellen Fall funktioniert das so:

%Vor%

Wenn Sie die Umwandlung ausführen, werden Sie feststellen, dass .year direkt neben der übergeordne- ten Box des Benutzers positioniert ist. Dann geben Sie die untere linke Ecke als "Rotationspunkt" an und voila! Absolute Kontrolle über Ihre Textpositionierung.

Ссылка

    
Duopixel 03.06.2011 12:59
quelle
2

Das Verschieben von gedrehtem Text in CSS ist sehr schwierig. Sie müssen daran denken, dass die Position wirksam wird, BEVOR der Text gedreht wird. Wenn Sie die Drehung in Ihrem Beispiel entfernen, sehen Sie, dass der nicht gedrehte Text korrekt positioniert ist.

Um gedrehten Text korrekt zu positionieren, müssen Sie berechnen, wie sich die Drehung auf die Position auswirkt ... und dann diese Position im Stylesheet korrigieren.

In Ihrem Fall brauchen Sie:

%Vor%     
Justin Niessner 02.06.2011 14:23
quelle

Tags und Links