CSS-Transformation: Rotation

Mit CSS 3 lassen sich für kompatible Browser schöne Animationen zaubern. Das folgende Bild bedient sich bei Mouseover der CSS-Eigenschaft transform: rotate.

Transformation

Das animierende Element ist in diesem Fall ein Paragraph mit der ID tanzFuerMich:

<p id="tanzFuerMich">
<img src="images/transformation.jpg" alt="Transformation" />
</p>

Im Stylesheet weisen wir diesem div dann die Transformation zu:

#tanzFuerMich {
margin: 150px auto;
width: 200px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

#tanzFuerMich:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}

Dieses Tutorial bewerten

zurück