Einzelnen Beitrag anzeigen

Benutzerbild von Phoenix
Phoenix
(Moderator)

Registriert seit: 25. Jun 2002
Ort: Hausach
7.611 Beiträge
 
#6

AW: HTML 5 & CSS 3: Hintergrund, aber nicht Text rotieren

  Alt 5. Mär 2011, 14:11
Mir würde spontan einfallen, den Inhalt auf dem Papier in ein separates Div (Geschwister-Element) zu packen und beides absolut zu positionieren (evtl. mit overflow: auto für den Textüberlauf). Aber keine Ahnung, ob das für deinen Fall in Frage kommt.
Leider nein. Wenn ich absolut positioniere kann ich ja nicht relativ zur gesamten aktuellen Seiten/Browsergröße mitskalieren. Das fällt leider komplett raus. Der Abstand z.B. von links oben (0,0) kann nie absolut sein, da die Seite, je größer sie ist, auch weiter links starten muss um einen relativ gleich breiten Content zu bieten der rechts genauso weit rausragt als links.

Auch die sich mit bewegende Positionierung des divs wäre da ein Problem.

Meine erste Idee wäre auch die gewesen, dass ich den Hintergrund in ein div packe und drehe. Den Text in ein weiteres div und dieses wieder zurückdrehe.
Aus oben genannten Gründen geht das auch nicht. Das Problem ist konkret mathematischer Natur. Die Rotation ist eine Matrix-Tranformation (und als solche muss sie auch im IE angegeben werden).

Durch die Verschiebung während der Transformation (alle Browser drehen um den Mittelpunkt, nur der IE tanzt (mal wieder) aus der Reihe und dreht um den Ursprung, das heisst da muss noch eine Verschiebung rein) ändert sich auch die Position der enthaltenen Elemente.

Das heisst beim zurückdrehen des inneren Elementes müsste ich die Verschiebung kennen um sie in die Matrix einzurechnen. Und an die komme ich a) nicht und selbst wenn ich da gut schätzen würde ändert sie sich b) ständig durch die Größenänderung des Browserfensters und c) kann man keine Variablen in CSS packen.

Fazit
Ich habe keine Ahnung wie ich den Text unrotiert über den rotierten Hintergrund bekommen soll.

Anbei mal den rotierten Hintergrund bis jetzt...
Angehängte Dateien
Dateityp: zip hp-template.zip (33,0 KB, 5x aufgerufen)
Sebastian Gingter
Phoenix - 不死鳥, Microsoft MVP, Rettungshundeführer
Über mich: Sebastian Gingter @ Thinktecture Mein Blog: https://gingter.org
  Mit Zitat antworten Zitat