GALERÍA 3D CON CSS3 Y JQUERY

Con las transformaciones 3D, podemos hacer que los elementos simples más interesante mediante el establecimiento de ellas en el espacio tridimensional. Junto con las transiciones CSS, estos elementos se pueden mover en el espacio 3D y crear un efecto realista. Hoy, queremos compartir una galería experimental en 3D con usted en que utiliza transformaciones 3D para CSS.

La idea principal es crear una galería circular en el que tenemos una imagen en el centro y dos en los lados. Ya que estamos usando la perspectiva, las dos imágenes laterales aparecerán tres dimensiones cuando se les gire.

Tenga en cuenta que esto sólo funcionará en los navegadores que soporten CSS 3D transforma.

¿CÓMO FUNCIONA?

La estructura HTML siguiente se utiliza para la galería:

<section id="dg-container" class="dg-container">
 <div class="dg-wrapper">
  <a href="#">
   <img src="images/1.jpg" alt="image01">
   <div http://www.colazionedamichy.it/ </ div>
  </ A>
  <a href="#">
   <-! ... ->
  </ A>
  <-! ... ->
 </ Div>
 <nav> 
  <span class="dg-prev"> << / span>
  <span class="dg-next">> </ span>
 </ Nav>
</ Seccion>

Y así es como la galería se inicia:

Galería de $ ('# dg-contenedor') ().;

OPCIONES

Las opciones disponibles son las siguientes:

actual: 0, 
/ / Índice del elemento actual

autoplay: false,
/ / Presentación de diapositivas de encendido / apagado

intervalo de: 2000  
/ / Tiempo entre transiciones

Espero que os guste!

VEA LA
DEMOSTRACIÓN DESCARGUE EL
CÓDIGO FUENTE

VIA: TYMPANUS