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

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

Comments are closed.
  1. 1

    Awesome job! Worked GREAT, but with a little lag in Chrome. In Firefox, was VERY buggy. Haven’t checked MSIE.

  2. 2

    Have a problem when I add this, in IE9,8,7 it only shows one (main) image, and the nav icons move to the left? Anyone know how to fix that?

    • 4

      Hmm.. I noticed that the demo site works fine with IE9, BUT when I download the source files, I only get one image (not three). Have you found a fix? View my dev site: bocagrandeffa.org in IE and in Chrome or Firefox and you will see that it only fails in IE. I saw the reply that said: CSS 3D Transform Controls don’t work in IE yet, however if you view the demo site (http://tympanus.net/Development/3DGallery/) it works fine. I am trying to find the diff. :-/

      Any ideas?

  3. 5

    Like the effect and how it works, but it killed my FF all 3 times I tested it, there’s something you must fix there

  4. 6

    Hi!
    How can I modify it to, when you click on the picture, it will slide to front?
    I hope someone can come up with a solution for that.
    It is almost perfect I like the angle the side pictures are but when you click on the pictures it doesn’t slide to front which is bad.
    It would be perfect if it does that.

  5. 9

    Hope this helps someone.
    The left and right images will occasionally flicker in FF 10. I narrowed this down to the styling of the text below each image. For whatever reason, FF doesn’t like the switch from no display to block display. By adding a base style using block display but making it hidden and modifying the original style, I was able to eliminate the flicker:

    .dg-wrapper a div {
    display: block;
    visibility: hidden;
    }
    .dg-wrapper a.dg-center div {
    visibility: visible;
    }

  6. 13

    It works fine in mozilla but not in chrome…few days back in chrome it works nice but today its not..:(( help

  7. 15

    autoplay not working in firefox and opera stops working immediately after the first slide, and rotateY only works in the chrome

  8. 17

    Beautiful. I wanted to ask but you can apply an effect on the middle photo zoom?
    When the photo is at the center is great, when you move to the side is made small. How can I do?
    thanks

  9. 18

    hello sir ,
    This effect is not working in IEs please give to us browser compatibility version

  10. 20

    Very nice application!
    My Firefox seems to put the front image in the background. Adding a Z-index value to the currentItm seems to solve the problem.
    this.$currentItm.css( currentCSS || {} ).css({
    ‘opacity’ : 1,
    ‘visibility’: ‘visible’,
    ‘z-index’ : 999
    }).addClass(‘dg-center’);

    Thanks for the application! :)

  11. 21

    I only get the “Browser” and drop-shadow … However I am using it in an article using ModulesAnyehre

  12. 23

    Added this under events so that if you click on the right or left image it moves to the center.

    this.$el.on(“click”,”img”, function(evt){
    evt.preventDefault();
    if ($(this).attr(“src”)==_self.$rightItm.children().attr(“src”)){
    _self._navigate(‘next’);
    }else if($(this).attr(“src”)==_self.$leftItm.children().attr(“src”)){
    _self._navigate(‘prev’);
    }
    });

    • 24

      Don Vawter,

      I am not an expert. Tried to use the code but failed. Can you please tell me where exactly do we need to paste the code?

      Thanks !

Comments are closed.