4 BlickWinkel

Guten Morgen Deutschland...

  • fensterregen
  • fensterregen0
  • fensterregen1
  • fensterregen2

CSS3 & Bild-Rotation

 

Bilder werden oft für grafische Effekte innerhalb von Beiträgen benutzt. Dazu ist es notwendig die Bilder vorher in das richtige Format zu bringen. Doch manches mal fehlt der richtige Effekt, um den Beitrag aufzupeppen.

Dabei widmen wir der Bildgestaltung oft viel Zeit. Ein weiter schöner Effekt ist die Rotation eines Images. In unserem Beispiel machen wir das mit etwas CSS und einem einfachen Bild.




Dazu kreieren wir eine neue Klasse in der CSS-Datei um die Bewegung zu erzeugen.

img.drehen {-webkit-animation: cssAnimation 8s 20 linear; -moz-animation: cssAnimation 8s 20 linear; -o-animation: cssAnimation 8s 20 linear;}

@-webkit-keyframes cssAnimation {from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);}to { -webkit-transform: rotate(360deg) scale(1) skew(1deg) translate(80px);}}

@-moz-keyframes cssAnimation {from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);}to {-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(80px); }}

@-o-keyframes cssAnimation {from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);}to {-o-transform: rotate(360deg) scale(1) skew(1deg) translate(80px);}}

Die CSS-Datei wird mit folgenden Zusatz vervollständigt:

Wenn wir die Rotationsgeschwindigkeit bei den Bildern ändern möchten, brauchen wir nur den Eintrag in der CSS-Datei abändern. Ich habe einfach von "8s" auf "12s" geändert. Natürlich kann man das Bild nicht nur drehen lassen, sondern auch auf einer Elipse rotieren lassen. Der Bildaufruf erfolgt dann mit:

<img class="drehen" data-src="dein-weg-zum-bild/bildname0.jpg" alt="Bildname" />

Die Einstellungen brauchen nur entsprechend angepasst werden und schon hat man einen sehr schönen Bildeffekt.









home  zur Hauptseite