in Playground
69 Comments

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:

View all contributions by

Website: http://tympanus.net

Related Articles

3DRoomExhibition_Featured

Experimental 3D Room Exhibition Layout

3dparticleexplorations

3D Particle Explorations

GridLayoutMotion_featured

Grid Layout with Motion Hover Effect and Content Preview

Stay connected with us:

Grab the RSS Feed Get email updates Follow us on Twitter Join us on Facebook Add us on Google+

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 69

Leave a comment
  3. 3

    Really nice effect when viewed in a WebKit browser, has some issues with scrollbars appearing when viewed in the latest FireFox (v10).

    Iron out these FF bugs and it’s a winner!

    Reply
  4. 4

    Nice gallery, quite inspiring for a new projekt.
    But It ís´n working good in in FF 10, the images flicker on action or aren´t displayed at all.
    Works fine in Chrome and Safari.

    Reply
  12. 14

    does not work correctly in Opera (last version). After the first click on the arrows, they stop working. Sorry for my English. Helps Google Translator. )))

    Reply
  13. 16

    Nice effect! Did some browser testing and even IE8 works nicely except for the 3d animation of course, but the main point it’s accesible. Only Opera (11.61) has a strange behavior. I only can click once on a next/previous arrow and after that it blocks… I can’t navigate the slideshow anymore. But hey… it.s an experiment, I know, and it looks awesome in Chrome 🙂

    Reply
  14. 17

    It seems that jquery.gallery.js couldn’t added ‘z-index: 999’.
    I try to fix js, then I did it.
    It works good at Firefox(v10)

    # I changed this part…
    jquery.gallery.js line: 154 ~ 158
    —
    this.$currentItm.css({
    ‘z-index’ : 999,
    ‘opacity’ : 1,
    ‘visibility’: ‘visible’
    }).addClass(‘dg-center’);
    —

    Reply
  15. 19

    Thanks for this beautiful sharing and a big red card for the browsers that doesn’t support CSS 3D transformations

    Reply
  16. 20

    Amazing, this is a great example of what can be achieved with CSS.

    Only 2-3 more years till it will be usable…

    Reply

Follow this discussion

Leave a Comment