find-templates

transition

zurück zur Übersicht

drehende 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); }

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:

Fahre mit der Maus über dieses DIV Feld. Das Feld und sein Inhalt dreht sich bei Mauskontakt um 360 Grad und wieder zurück.



Heute: 5 Besucher