Grafik drehen

[Jakob Weigert]

Hallo,
gibt es in HTML (oder mit CSS, JavaScript, ...) irgendeine Möglichkeit, eine Grafik um einen bestimmten Winkel zu drehen (neigen)? Hab schon überall geschaut, auch schon mal SVG-Vector-Grafiken ausprobiert. Das ist mir allerdings etwas zu kompliziert. Vielleicht kennt ja jemand eine einfache Möglichkeit. Es muss auch nur im MSIE 6 funktionieren.
Danke,
Jakob Weigert

[Thomas Meinike]

Hallo,

gibt es in HTML (oder mit CSS, JavaScript, ...) irgendeine Möglichkeit, eine Grafik um einen bestimmten Winkel zu drehen (neigen)?

AFAIK keine.

Hab schon überall geschaut, auch schon mal SVG-Vector-Grafiken ausprobiert. Das ist mir allerdings etwas zu kompliziert.

Hm, das ist doch nicht komplizierter als HTML (hier Rotation um 30°):

<image xlink:href="bild.gif" x="100" y="50" width="88" height="31" transform="rotate(30)"/>

Neigen mit skewX(winkel) | skewY(winkel), Verschieben mit translate(dx,dy), Skalieren mit scale(x,(y)).

MfG, Thomas

[Jakob Weigert]

Danke, aber ich verstehe nicht ganz, wieso es sich beim drehen immer verschiebt, wenn man die Gradzahl ändert.

[Thomas Meinike]

Hallo,

Danke, aber ich verstehe nicht ganz, wieso es sich beim drehen immer verschiebt, wenn man die Gradzahl ändert.

Man kann bei rotate() die Koordinaten des Drehpunktes mit angeben:

<image xlink:href="bild.gif" x="100" y="50" width="88" height="31" transform="rotate(30,100,50)"/>

entspricht

<image xlink:href="bild.gif" x="100" y="50" width="88" height="31" transform="translate(100,50) rotate(30) translate(-100,-50)"/>

oder in Matrix-Schreibweise:

<image xlink:href="adobesvg.gif" x="100" y="50" width="88" height="31" transform="matrix(0.866025,0.500000,-0.500000,0.866025,38.397460,-43.301270)"/>

Lege mal das Bild ohne Transformation dazu:
<image xlink:href="bild.gif" x="100" y="50" width="88" height="31"/>

MfG, Thomas

[Armin G.]

Tach auch,

gibt es in HTML (oder mit CSS, JavaScript, ...) irgendeine Möglichkeit, eine Grafik um einen bestimmten Winkel zu drehen (neigen)?

AFAIK keine.

Milo kennt eine: http://milov.nl/entry/1567 Funktioniert zwar nur im IE (und in 90o Schritten), aber vielleicht reicht das ja.

Gruss,
Armin

[Thomas Meinike]

Hallo,

Milo kennt eine: http://milov.nl/entry/1567 Funktioniert zwar nur im IE (und in 90o Schritten), aber vielleicht reicht das ja.

Ich kann die Seite nicht erreichen, vermute aber mal, dass es sich um die Anwendung von IE-Filtern handelt, was dann aber auch weder HTML, noch CSS oder JS waere ;-).

MfG, Thomas

[Armin G.]

Tach auch,

Ich kann die Seite nicht erreichen, vermute aber mal, dass es sich um die Anwendung von IE-Filtern handelt, was dann aber auch weder HTML, noch CSS oder JS waere ;-).

Hm, ich komme ohne Probleme hin. Ich glaube es handelt sich um beides, das JS-Script ist hier: http://milov.nl/imgClick.js. Aber es wird wohl auf einen IE-Filter angewandt. Soweit ich das als JS-Unkundiger ausmachen konnte.

Gruss,
Armin