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

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? Subscribe and get our Collective newsletter twice a tweek.

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

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Making CSS View Transitions Easy with Velvette

Twisted Colorful Spheres with Three.js

FBO Particles with Three.js

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

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