Efecto rotación en las imagenes con css I

26 de julio 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-1" 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-1 {
background:#FFF;
border: 1px solid #CCC;
line-height: 0;
margin: 4px;
padding: 4px;
-moz-transition: all 1s linear 0s;
-ms-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
transition: all 1s linear 0s;
cursor:pointer;
}
.rotacion-img-1:hover {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
-o-transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
transform:rotateY(360deg);
}