3D Gallery with CSS3 and jQuery

Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms.

3DGallery

View demo Download source

With 3D transforms, we can make simple elements more interesting by setting them into three dimensional space. Together with CSS transitions, these elements can be moved in 3D space and create a realistic effect. Today, we want to share an experimental 3D gallery with you that uses CSS 3D transforms.

The main idea is to create a circular gallery where we have an image in the center and two on the sides. Since we are using perspective, the two lateral images will appear three dimensional when we rotate them.

Please note that this will only work in browsers that support CSS 3D transforms.

How it works

The following HTML structure is used for the gallery:

<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>
</section>

And this is how the gallery is initialized:

$('#dg-container').gallery();

Options

The following options are available:

current		: 0,	
// index of current item

autoplay	: false,
// slideshow on / off

interval	: 2000  
// time between transitions

I hope you enjoy it!

View demo Download source

Previous:
Next:

Tagged with:

Related Articles

Feedback 69

Comments are closed.
  1. 1

    hey m having a problem with IE it works well in firefox and chrome but in IE it shows onli a single image instead of 3 any fixes for that ???

Comments are closed.