3D Gallery with CSS3 and jQuery

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

By in Playground on
3DGallery
demo download

From our sponsor: Create stunning brand assets with the help of our AI-driven Creative Assistant. Get started today.

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!

Tagged with:

Creating 3D Characters in Three.js

Creating the Effect of Transparent Glass and Plastic in Three.js

Rotated 3D Letters and Image Hover Effect

Stay up to date with the latest web design and development news and relevant updates from Codrops.

From our sponsor
Divi
Create websites rapidly
With the Divi Layout Packs you'll get more than 800 world-class designs ready to be used for your client projects. Try it for free →

Feedback 69

Comments are closed.

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

  4. 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

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

  7. 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! 🙂

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

  10. 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’);
    }
    });

    • 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 !

  11. 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 ???