Ejemplo CSS3: rotar y transformar una imagen

Ejemplo de código fuente en CSS3, para ver cómo rotar y transformar una imagen al pasar el ratón por encima, rotando la imagen unos 20 grados y transformándola de tamaño para hacerla más grande, todo ello realizado mediante clases de CSS3.

Descripción del ejemplo

Lo primero de todo crearemos nuestra hojadeestilos.css y le meteremos dentro las clases que dejo puestas en la sección Código. Después, insertamos dicha hoja a un archivo html, junto con una imagen que más nos guste, y a la imagen le aplicamos la clase rotate:

<img class=”rotate” …

Código

/* Rotación */			
.rotate{

	-webkit-transition-duration: 0.8s;
	-moz-transition-duration: 0.8s;
	-o-transition-duration: 0.8s;
	transition-duration: 0.8s;

	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;

	overflow:hidden;

}  
 

/* Transformación al pasar el ratón por encima */ 
.rotate:hover  
{

    transform: scale(1.2, 1.2) rotate(20deg);
    -ms-transform: scale(1.2, 1.2) rotate(20deg);
    -webkit-transform:scale(1.2, 1.2) rotate(20deg);
    -o-transform: scale(1.2, 1.2) rotate(20deg);

}

Demo del ejemplo