16

4

Crea un mapa con efecto 3D

Como ya sabemos las posibilidades de CSS3 son infinitas y con las rotaciones en 3D nos permite crear efectos en 3D que nunca hubiésemos pensado hace unos años verlos en un navegador.
En este artículo veremos como hacer un mapa que se despliega en 3D, o lo que podría ser un tríptico, usando rotaciones 3D de una forma muy simple.

Este efecto se basa en rotaciones sobre el eje Y (el vertical, por donde se doblan las partes) y para que permanezcan unidos los elementos hacemos algo tan simple como es poner un elemento dentro del otro y así conseguir una cadena, todos con posiciones absolutas.
Nota: funciona perfectamente en los principales navegadores, aunque es recomendable usar prefijos (en IE10 de supone que debería de funcionar, pero destroza el efecto, cosas de Internet Explorer).

Estructura

La estructura está formada por una sucesión de elementos uno dentro del otro, que además tienen están numerados para poder establecer la posición de la imagen de fondo y que cuadre con el resto de elementos.

1. <div class="trip trip1">

<div class="trip trip2">

<!-- Los siguientes serán: trip3, trip4... -->

</div>

2. </div>

Antes de aplicar el 3D tendríamos que tener una sucesión de elementos con un ancho fijo, que tendrán una posición absoluta y estarán juntos (aunque no lo estén por el flujo de la página).
El tamaño de cada elemento lo tenemos que calcular a partir del ancho total que queremos, dividido entre el número de partes del mapa o tríptico (por ejemplo 300 entre 6 partes).

1. /* Damos el tamaño a todos */
2. .trip{

position: absolute;

width: 50px;

height: 240px;

left: 100%; /* Se desplaza su propio tamaño (50px) */

3. }
5. /* La primera tendrá un "left:0px" */
6. .trip1{

left: 0px;

7. }

Fondo continuado

Para hacer coincidir la imagen de fondo lo que tenemos que hacer es cambiar su posición de forma progresiva en todas las partes.

1. /* Todos tiene la misma imagen */
2. .trip{

background-image: url("mapa.jpg");

3. }
5. /* Añadimos el desplazamiento de su ancho (50px) */
6. .trip1{ background-position: 0px;}
7. .trip2{ background-position: 50px;}
8. .trip3{ background-position: 100px;}
9. .trip4{ background-position: 150px;}
10. .trip5{ background-position: 200px;}
11. .trip6{ background-position: 250px;}

Así sería como quedan las imágenes de fondo con el desplazamiento y para dar las sombras en los números pares he aplicado el efecto box-shadow de la siguiente forma.

1. .trip2,
2. .trip4,
3. .trip6{

box-shadow: 0px 0px 0px 1000px rgba(0,0,0,0.2);

4. }

Efecto 3D

En el efecto que tiene el mapa hay dos partes, la primera es el propio bloque que contiene el mapa y la segunda parte son las dobleces del mapa y ambas partes tienen distintas rotaciones.
Para empezar he añadido una ligera rotación al bloque del mapa para que dé la sensación de que está tumbado, inclinándolo 35 grados sobre el eje X, además añadiéndole la propiedad que hará que se mantenga el 3D en los elementos subyacentes (con preserve-3d) y tendrá una perspectiva de 2000px, de la siguiente forma.

1. .contenedor{

transform: perspective(2000px) rotateX(35deg);

transform-style: preserve-3d;

2. }

Y por último llega la parte un poco más complicada, que es añadir correctamente las rotaciones a los pliegues, con un ángulo de 30 grados para este ejemplo y teniendo en cuenta dos cosas: la primera es que un elemento rota hacia un lado y el siguiente hacia otro (para hacer el zig-zag) y no es tan simple como creemos, tenemos que tener en cuenta que no solo tenemos que aplicar esos 30 grados, sino que tenemos que aplicar el doble para contrarrestar la anterior rotación (a excepción del primer elemento), pero lo vemos mejor en el código.
Otra cosa que tenemos que tener en cuenta es que rotamos desde el eje Y, pero la rotación se origina en el lado izquierdo (que lo establecemos con el transform-origin).

1. /* Todas las partes */
2. .trip{

transform: rotateY(60deg);

transform-origin: 0% 50%;

transform-style: preserve-3d;

3. }
5. /* Pares */
6. .trip2,
7. .trip4,
8. .trip6{

transform: rotateY(-60deg);

9. }
11. /* El primero tiene 30 grados y no el doble */
12. .trip1{

transform: rotateY(30deg);

13. }

Resumen

Con este efecto podemos crear varios movimientos, podemos desplegarlo de varias formas, el truco está en añadir el efecto que he explicado en el artículo solo cuando se produzca el evento :hover y sin el tener otra posición, como estar doblado o enrollado.