CSS-Transformation

Rotation

Auch mit CSS lassen sich für kompatible Browser schicke Animationen zaubern. Das folgende Bild bedient sich bei Mouseover der CSS-Eigenschaft transform: rotate.

Transformation

Das animierende Element ist in diesem Fall ein div-Container mit der ID tanzFuerMich: 

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

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

zurück