3D Gallery with CSS3 and jQuery

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

By Manoela Ilic in Playground on
3DGallery
Demo Download

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.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Check out our Collective and stay in the loop.

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!

Manoela Ilic

Editor-in-Chief at Codrops. Designer, developer, and dreamer — sharing web inspiration with millions since 2009. Bringing together 20+ years of code, creativity, and community.

3D

How to Create a Gooey Search Interaction with Framer Motion and React

Animating Letters with Shaders: Interactive Text Effect with Three.js & GLSL

Crafting a Dice Roller with Three.js and Cannon-es

Browse amazing websites

💎✨ Discover fresh gems in our handpicked exhibition of standout websites that caught our eye.

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