Bild gedreht zeigen

[Thomas220]

Hallo zusammen, hoffentlich ist meine Frage nicht zu banal. Ich möchte gern auf meiner Webseite Bilder gedreht positionieren. Also um 7° oder 15° oder 32° gedreht darstellen. Habe schon mal gegoogelt komme da auf transform.css. Habe da aber Null-Ahnung. Geht das unkomplizierter, als mit CSS?
Danke.
Thomas

 

[Tronjer]

Schau mal hier, das ist ganz einfach.

Tryit Editor v1.5

Und nein, unkomplizierter als mit CSS geht es nicht.

 

[mermshaus]

Wenn man dieser Seite Glauben schenken kann, funktioniert das im IE allerdings erst ab Version 9.

- When can I use... Support tables for HTML5, CSS3, etc

Es gibt Workarounds mit diesen DirectX-Filtern, aber damit würde ich mich nicht abgeben und im Zweifel im IE < 9 einfach auf die Rotation verzichten.

 

[Thomas220]

GEIL!
Super! Vielen Dank.
Noch eine Frage: Wenn ich für verschiedene Bilder verschiedene Winkel brauche, kann ich dann den Text nach "div" im Header wiederholen und für "div" dann z.Bsp. "div2" eingeben. Und dan später im body das andere Bild mit <div2></div2> drehen lassen?
Nochmals vielen Dank.
Thomas

 

[Tronjer]

Naja, zumindest fast.

Du musst den DIVs unterschiedliche ID's geben. Also nicht <div1>, <div2>, sondern <div id="eins">, <div id="zwei"> ...

 

[Thomas220]

Hallo Tronjer, vielen Dank.
Klappt leider nicht so, wie ich es mir denke. Habe im Header nun eingefügt:
div id="eins"
{
width:300px;
height:200px;
background-color:yellow;
/* Rotate div */
. . .
und

div id="zwei"
{
width:300px;
height:200px;
background-color:yellow;
/* Rotate div */
transform:rotate(-7deg);

Und im Body
<div id="eins">
<img alt="Morgennebel Talsperre P&ouml;hl" height="333" src="Morgennebel.jpg" width="500" title="Morgennebel Talsperre P&ouml;hl">
</div id="eins">

und

<div id="zwei">
<img alt="Das Vogtl&amp;auml;ndische Meer" height="333" src="VogtlMeer.jpg" width="500">
</div id="zwei">

Aber nun geht weder das erst noch das zweite. Was mache ich hier falsch?

Danke.
Thomas

 

[Tronjer]

Zumindest zwei Dinge.

Das HTML sieht soweit in Ordnung aus. Aber CSS musst du etwas anders schreiben. Sofern du es im Head verankerst, benötigst du erst mal einen Style Container und musst außerdem '<div>' durch '*' ersetzen, also:

<style>
    * eins {
        width:300px;
        ......
}
</style>

Außerdem darfst du nicht die vendor-prefixes vergessen. Wenn da steht:

transform:rotate(7deg);
-ms-transform:rotate(7deg);
-moz-transform:rotate(7deg);
-webkit-transform:rotate(7deg);
-o-transform:rotate(7deg);

dann muss das auch so eingefügt werden, um die Darstellung in unterschiedlichen Browsern zu ermöglichen.

 

[bodil]

Verzeih, dass ich dir widerspreche, Tronjer, aber das HTML sieht nicht in Ordnung aus. Im schließenden Tag darf m.E. keine Id stehen. Auch sonst nichts.
Falsch:

<div id="zwei">...</div id="zwei">

Richtig:

<div id="zwei">...</div>

Zu welchem öffnenden Tag das schließende gehört, ergibt sich aus dem Code.

Zudem erstaunt mich deine CSS-Notation. Um den Style für ein Div mit der Id »eins« zu definieren, müsste ich doch eigentlich

<style>
    div#eins {...}
</style>

schreiben. Oder eben

<style>
   #eins {...}
</style>

wenn mir egal ist, ob das Ding mit der Id »eins« ein Div ist oder nicht.
Die Notation

<style>
    * eins {...}
</style>

würde doch nur für HTML-Objekte greifen, die »eins« heißen. Also

   <eins>...</eins>

Und die sind ja nicht allzu gebräuchlich ... Oder hab ich was verpasst?

 

[mermshaus]

Und ein ID-Selektor sieht so aus: #id { … }, also zum Beispiel #eins { … }.

Flüchtigkeitsfehler, nehme ich an. Passiert. :)

Edit: Edit von bodil nicht gesehen.

 

[Thomas220]

Hallo an alle, vielen Dank. Super Hilfe. So klappt es nun mit den gedrehten Bildern.

<style type="text/css">
 
div#eins
{
width:300px;
height:200px;
/*background-color:yellow;*/
/* Rotate div */
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* Internet Explorer */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
}
</style>

<style type="text/css">
div#zwei 
{
id="zwei"
width:300px;
height:200px;
/*background-color:yellow;*/
/* Rotate div */
transform:rotate(-7deg);
-ms-transform:rotate(-7deg); /* Internet Explorer */
-moz-transform:rotate(-7deg); /* Firefox */
-webkit-transform:rotate(-7deg); /* Safari and Chrome */
-o-transform:rotate(-7deg); /* Opera */
}
</style>

Und bei den Bildern:

<div id="eins">
<img alt="Morgennebel Talsperre P&ouml;hl" height="333" src="Morgennebel.jpg" width="500" title="Morgennebel Talsperre P&ouml;hl">
</div>
<div id="zwei">
<img alt="Das Vogtl&amp;auml;ndische Meer" height="333" src="VogtlMeer.jpg" width="500">
</div>

Was man mit CSS nicht alles machen kann.
Nochmals vielen Dank.

Thomas