Efecto rotación en las imagenes con css II

19 de agosto de 2014

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