transition
zurück zur Übersichtdrehende Grafiken
fahre mit der Maus über die Grafiken (IE 6 - IE 9 sehen hier keine Animation) :
Schritt 1 : Der HTML-Code
Dem Bild geben wir eine Klasse. Zum Beispiel den Klassennamen "drehen"
HTML-Code für eine verlinkte Grafik, einfügen im Seiteninhalt (oder rechte Box)
<a href="LINK"><img class="drehen" src="Grafikadresse" alt="" border="0" /></a>
Schritt 2 : Der CSS-Code
Die Klasse "drehen" bekommt nun die CSS-Eigenschaften für die Animation.
.drehen {
transition: transform 0.5s ease-out; }
.drehen:hover {
transform: rotate(360deg); }
transition: transform 0.5s ease-out; }
.drehen:hover {
transform: rotate(360deg); }
Du hast das Baukasten-Design "CSS" ? Code einfügen im Feld "css ohne style tags".
Alle anderen Designs (Iceblue, Red, Butterly, Colorful u.s.w.)
Den CSS-Code einfügen im Feld "Text ÜBER Design", vor dem --></style>
Wenn Du im Feld "Text über Design" noch keinen CSS Code stehen hast, muss der style-tag dazu.
Schreibe dann vor dem Code : <style type="text/css"><!-- Und nach dem Code : --></style>
Beispiel mit einem DIV Feld:
