Efecto rotación en las imagenes con css III

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