Efecto rotación en las imagenes con css II

Si queremos ponerlo dentro de una página en html lo haremos dentro de las etiquetas correspondientes, de esta manera :

<style type="text/css">
...aqui el código css...
</style>

debajo ponemos

<img class="rotacion-img-2" src="URL de la imagen"/>

Para aplicar este efecto en tu blog de blogger ir a:

Plantilla ►Personalizar ►Diseñador de Plantillas ► Avanzado ► Añadir Código CSS Personalizado

pegamos el siguiente estilos css:

.rotacion-img-2 {
background:#FFF;
border: 1px solid #CCC;
display: block;
line-height: 0;
margin: 4px;
padding: 4px;
-moz-transition: all 400ms ease-in-out;
-ms-transition: all 400ms ease-in-out;
-o-transition: all 400ms ease-in-out;
-webkit-transition: all 400ms ease-in-out;
transition: all 400ms ease-in-out;
cursor:pointer;
}
.rotacion-img-2:hover {
-moz-transform:rotate(-360deg);
-webkit-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
-ms-transform:rotate(-360deg);
transform:rotate(-360deg);
}

El código HTML es el siguiente:

<img class="rotacion-img-2" src="URL de la imagen"/>