Special 3D gallery effects implemented by jQuery and CSS3

Online Demo local download

Today, we will share a special 3D loop gallery display effect implemented by jQuery and CSS3. This 3D effect is implemented using the 3D change feature of CSS3, which is simple and gorgeous. I hope you will like it!

Using 3D changes and placing them in a 3D space, we can make simple elements more dynamic and use the CSS transition effect, these elements can easily be moved to a 3D space and create a very real effect.

The main idea is to create a carousel gallery. We can place an image in the middle and two pictures next to it. Because we use different angles, it seems that the images next to the two images are set in a 3D space, and then we rotate them.

Note: The effect here requires your browser to support 3D changes.

How to work

 
 

  
  
<section id="dg-container" class="dg-container">  
  
  
    <div class="dg-wrapper">  
  
  
        <a href="#">  
  
  
              
  
  
            <div>http://www.colazionedamichy.it/</div>  
  
  
        </a>  
  
  
        <a href="#">  
  
  
            <!-- ... -->  
  
  
        </a>  
  
  
        <!-- ... -->  
  
  
    </div>  
  
  
    <nav>  
  
  
        <span class="dg-prev"><</span>  
  
  
        <span class="dg-next">></span>  
  
  
    </nav>  
  
  
</section> 
 
 

Option

 
 

  
  
current     : 0,  
  
  
// index of current item  
  
  
   
  
  
autoplay    : false,  
  
  
// slideshow on / off  
  
  
   
  
  
interval    : 2000  
  
  
// time between transitions 
 
 

For all the code, see online demonstration.

Original article: http://www.cnblogs.com/gbin1/archive/2012/02/23/2365879.html