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

[Phoenix]

Hi,

sind irgendwelche HTML&CSS Guru's hier? :stupid:

Ich würde gerne mit Html5 und CSS3 den vorderen Hintergrund (ja, gleich weiter :) ) einer Webseite (eigentlich lediglich ein einfarbiges DIV) um ein paar Grad rotieren lassen, der Text im Vordergrund soll aber nicht rotieren, sondern normal ausgerichtet sein.

Konkreter:Man stelle sich eine komplett schwarze Webseite vor (hintergrund).
Auf dieser Webseite wird ein weisses Blatt papier im Querformat (der vordere Hintergrund ;-)) mit Text angezeigt.

Nun wird dieses Blatt Papier um ein paar Grad gegen den Uhrzeigersinn gedreht, der Text darauf soll aber gerade ausgerichtet bleiben (als ob das Blatt schief bedruckt wurde, der text gerade lesbar ist und das blatt eben schief liegt).

Idealerweise würde das Blatt im korrekten Seitenverhältnis bis zu einer bestimmten größe mit skalieren, wenn das Browserfenster seine Größe ändert.

Ich kann zwar Div's rotieren lassen, dann aber nur komplett mit Inhalt und das skalieren ist auch nicht so ganz trivial. Anscheinend sollte sowas mit HTML5 aber gehen. Achja: Muss nur in den jeweils aktuellen Versionen von IE, Chrome, Safari und Firefox laufen. Also IE8+. Ältere Versionen sind nicht die Zielgruppe und wer seine Browser nicht up-to-date hält wird die Seite halt nicht zu Gesicht bekommen.

[Ruio]

Und wenn du für den Inhalt einen inneren Container nimmst und dort wieder zurückrotierst?

[S2B]

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.

[Florian Hämmerle]

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.

[Phoenix]

Das Problem wäre in beiden Fällen die Skalierung, aber ich werde das mit dem hin- und herrotieren mal ausprobieren heut Nachmittag. Melde mich dann mal mit dem Ergebnis wieder ;-)

[Phoenix]

Zitat:

Zitat von S2B (Beitrag 1085993)

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.

Zitat:

Zitat von Florian Hämmerle (Beitrag 1086011)

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...

[Matze]

Zitat:

Zitat von Phoenix (Beitrag 1086087)

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.

Das habe ich noch nicht genaz verstanden. Wie meinst du das?

Ich habe es mal absolut positioniert angehängt. Und was genau hättest du da gerne anders?
Achja, die CSS-Eigenschaft "font-color" gibt es nicht. Das muss "color" heißen.

Grüße
Matze

[Phoenix]

Schau Dir das mal in einem anständigen Browser an, und dann im IE:
http://jsfiddle.net/bEu4K/3/
Und dann resize mal den Browser :)