Efecto flip con fotos en 3D con CSS3 I

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>