Espera unos segundos se esta Cargando...

Efecto flip con fotos en 3D con CSS3 I

20 de septiembre de 2014

Efecto flip con fotos en 3D con CSS3






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
<div class="flip">
<img src="Url de la Imagen" class="flip">
</div>
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:

.flip{
position: relative;
transition: all 1s ease;
transform: perspective(600px);
transform-origin: 100% 50%;
transform-style: preserve-3d;
}
.flip:hover{
transform: perspective(600px) rotateY(-180deg) translateX(100%);
}

El código HTML es el siguiente:
<div class="flip">
<img src="Url de la Imagen" class="flip">
</div>










-

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