14

3

Efecto flip con fotos en 3D con CSS3

CSS3 y el 3D están abriendo una barbaridad de posibilidades, hace unos días mostré varios efectos 3D que usa Windows 8 en su nueva interfaz y un experimento propio donde un texto hace un efecto flip y muestra tras un texto una imagen (mediante una rotación en 3D).
Y me han pedido que explique como realizar este efecto, que es tan fácil hacer rotaciones 3D y hacer uso de la propiedad backface-visibility.

Como podemos ver en el ejemplo anterior tenemos dos imágenes, una por cada cara y al girar el elemento deja ver la de la cara trasera.
Vamos a ver como crear este efecto flip con imágenes y con texto e imágenes.

Realizar el giro

Ya que si no se conoce bien el funcionamiento del 3D de CSS3 puede ser un poco complicado.
Lo primero que tendremos es un bloque (un DIV) cuadrado al que le realizaremos el giro 3D que tendrá también el atributo que preserva el efecto 3D a los elementos que están en su interior (que es necesario para que haya dos caras distintas).

En el proceso omitiré propiedades CSS como los tamaños, simplemente añadiré transformaciones y propiedades necesarias.

1. .flip{

position: relative;

transition: all 1s ease;

transform: perspective(600px);

transform-origin: 100% 50%;

transform-style: preserve-3d;

2. }
4. .flip:hover{

transform: perspective(600px) rotateY(-180deg) translateX(100%);

5. }

Nota: puede que sea necesario usar las propiedades anteriores con prefijos de los navegadores (-webkit-,-moz-...).
En el código anterior tenemos varias propiedades que sirven para lo siguiente:

• position: la posición es relativa para que los elementos posteriormente se ajusten a la imagen (más sobre los tipos de posición).
• transition: añadimos una transición para que el efecto sea progresivo.
• transform: le especificamos la perspectiva (más sobre rotaciones 3D y perspectiva).
• transform-origin: hemos establecido el origen de la rotación en un lateral del elemento, así se hace el giro hacia detrás.
• transform-style: usamos el atributo preserve-3d para que los elementos subyacentes actúen en un contexto de 3D.

Y el giro se realiza al pasar por encima, donde realizamos una rotación sobre el eje Y de 180º y movemos el elemento hacia el interior para que no sobresalga (como ya vimos).

Realizar un giro con varias imágenes

Lo primero que tenemos que hacer es añadir dos imágenes cualquiera que van a tener el mismo tamaño dentro del elemento que realiza las rotaciones.

1. <div class="flip">

<img src="imagen1.jpg" class="flip-1">

<img src="imagen2.jpg" class="flip-2">

2. </div>

Las dos imágenes tienen el mismo CSS, tienen su cara trasera oculta y tienen posición absolute, para así estar una encima de la otra.
La única diferencia es que la segunda imagen (la que va a ir en la cara trasera) la hemos rotado 180º ya, por lo que en estado normal ya está oculta y cuando giramos el elemento entero solo aparece esta y en la posición que debe de estar (y no del revés).

1. .flip .flip-1,
2. .flip .flip-2{

position: absolute;

backface-visibility: hidden;

3. }
5. .flip .flip-2{

transform: rotateY(-180deg);

6. }

Realizar el giro con una imagen y texto

Para realizar este efecto con texto debemos de hacer exactamente lo mismo que antes, pero en lugar de usar una imagen usamos un DIV y no deberíamos de encontrar problemas.

1. <div class="flip">

<img src="imagen1.jpg" class="flip-1">

<div class="flip-2"> Texto de prueba </div>

2. </div>

Resumen

Este es un efecto que se le puede sacar mucho rendimiento, por ejemplo para visualizar muchas imágenes y mostrar un texto que las acompañe de una forma original.
Pero hay que acordarse de la compatibilidad con navegadores antiguos y que además los modernos usan estas propiedades CSS con sus propios prefijos, por lo que es muy aconsejable usarlos.