Efecto rotación en las imagenes con css IV

16 de diciembre 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>

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-4 {
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-4:hover {
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-moz-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
transform:rotateY(180deg);
}