Espera unos segundos se esta Cargando...

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);
}
El código HTML es el siguiente:
<img class="rotacion-img-3" src="URL de la imagen"/>




-

No hay comentarios -

Publicar un comentario

Cosas para el Blog © Creative Commons 2014 | Plantilla Cosas para el Blog

creada por CPB | Con la tecnología de Blogger