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 February 6, 2012

Demo Download

From our sponsor: Ready to show your plugin skills? Enter the Penpot Plugins Contest (Nov 15-Dec 15) to win cash prizes!

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.

Master JavaScript Animation with GSAP – Perfect for Beginners! Get full, free access to 34 video lessons, step-by-step projects, and hands-on demos. Enroll for free →

Feedback ⁶⁹

Comments are closed.

Paul February 6, 2012 at 09:46

Nice work thanks for the plugin.
Christophor S. Wilson February 6, 2012 at 09:55

This is a great tut!!! Thanks so much for sharing it Pedro.
Phil Middlemass February 6, 2012 at 09:56

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!
Mark February 6, 2012 at 10:12

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.
Chris February 6, 2012 at 10:26

Very nice… except with Firefox (v10)
grzybecki February 6, 2012 at 10:27

Nice looking and simple effect. Thanks !
Beben Koben February 6, 2012 at 11:00

hohohoho….so amazing, beautyful \m/
Mo February 6, 2012 at 11:50

I live this site so much. I can’t wait to see their next post. The work done is brilliant. keep it up
- Mo February 6, 2012 at 11:59
  
  *love
liuyanghejerry February 6, 2012 at 11:55

Nice one, just lack of keyboard support 😉
- Palle Zingmark March 13, 2012 at 23:55
  
  +1 on this.
Ciwan February 6, 2012 at 12:30

As usual .. top quality stuff.

Thank You so much.
Christian February 6, 2012 at 12:47

Thanks a lot for this tutorial! 🙂
Acelote February 6, 2012 at 12:51

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. )))
- Emilio Cobos February 6, 2012 at 15:36
  
  I’ve got the same problem
Ralph February 6, 2012 at 12:52

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 🙂
Taketo February 6, 2012 at 14:44

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’);
—
- Tailzip May 10, 2012 at 12:09
  
  Thack you so much ! Problem fixed in FF 🙂
eGwada February 6, 2012 at 14:55

Thanks for this beautiful sharing and a big red card for the browsers that doesn’t support CSS 3D transformations
Aaron @ iamcreative.me February 6, 2012 at 15:06

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

Only 2-3 more years till it will be usable…
Hammy Havoc February 6, 2012 at 15:51

This would be especially awesome if it worked with touch like iPhone and iPad.
Vitaly K. February 6, 2012 at 17:43

Very nice! Thanks.
Peiman February 6, 2012 at 18:16

Greate
Fab February 6, 2012 at 23:32

Thank you for the nice tutorial. Good job.
Sandro February 6, 2012 at 23:56

Good article, I’ve wrote a demo a few months ago which tries to achieve the same effect without javascript. There’s no autoplay obviously but the rest it’s pretty close imho: a pure css3 coverflow effect 🙂
Madhu rakhal magar February 7, 2012 at 04:31

Upfff ……………………. I don’t like it. I love it……………….great looking for this type of articles.
rajeev ranjan February 7, 2012 at 06:09

this is most beautiful 3d creation. very easly use
Alex February 8, 2012 at 04:29

Amazing job!
Matt February 8, 2012 at 05:31

Laggy in Firefox 10.0. When the page loads the left and right images are on top of the center image. Sometimes the left image disappears. Works great in Chrome.
Illy February 8, 2012 at 12:37

On Opera it works just for one slide and then it’s not working, also laggy. “Invalid value for property: zoom”
Simon February 8, 2012 at 23:46

Good!!! really really good!! Nice work!
uae exchange rate February 9, 2012 at 06:56

Wow, I always adore 3D, love it.
Ganesh February 9, 2012 at 12:32

Nice…tnx..
sergio February 9, 2012 at 20:58

Amazing.
I noticed your email envelope icon link is broken.

I wanted to thank you for your tutorials. I merged your tutorial with Fotobook plugin for WordPress and I made a nice looking plugin.
I gave you credit of course.
http://socialblogsitewebdesign.com/wordpress_plugins/darkroom-facebook-photo-gallery

A quick question: Is it normal for jQuery to quit on a few tens of webkit rotations?
The above script randomly fails to rotate all the pictures (added my -1 index for the inner-shadow to render on top of the images makes the non-rotated images to dissapear)
I found out the script is susceptible to any JS error. Even the layer.eventX deprecated (jQuery?) warning prevents the foreach script to finish rotating the images.
I’d appreciate you take a look at the code.

Do you have a effective way to make a mouseleave to “wait” a few seconds based on two readings of the mouse proximity to the element?
I’ve been trying to make the mouseentered image to “figure out” whether the pointer is approaching or not so it can wait in the hovered state a second, to prevent the rotating image moving away the pointer stuttering the mounseenter-leave-enter effect, without affecting the quick hover-out reaction if the pointer is just passing-by.
Modani February 9, 2012 at 22:04

It work great on my Blog, Thanks!!
I want more code……
madler February 10, 2012 at 14:24

I see this demo in chrome browser (V16) flickering in the transitions,does anyone have an idea of why does this happens?

i´ve tried this with no luck

-webkit-backface-visibility: hidden;

from

http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform
andym February 10, 2012 at 16:23

nice…is there any way to stop it from changing the weight and opacity of all the fonts on the rest of my page?
webdevelopergeeks February 11, 2012 at 12:08

Hey great 3d effect. I always check this site and always find something that is pleasing to my eyes. i have seen some effects like this but that was 3D accordion. This is the first time i have come across gallery. Really nice, small and sweet tutorial as well.
Proxy February 13, 2012 at 15:34

Wahou ! Nice 3D effect ! Goog job.
Sekuline February 14, 2012 at 02:44

Nice!

Add “overflow: hidden” for fix scroll bar bug.

Sekuline.
diseño web February 14, 2012 at 03:45

Que buen slider, por lo que veo facil de implementar, gracias!!
Cathy Dutton February 14, 2012 at 10:03

Hi Pedro

Nice post, I haven’t experimented with css transitions yet but it is defiantly something I am looking to incorporate in future design work. I have used a similar effect recently but the jquery roundabout plugin I opted for caused numerous conflict issues in other areas of the site. Time for a change I think.
Gunnar Bittersmann February 15, 2012 at 09:40

This is far from being great. It does not work in neither Firefox nor Opera. It degrades gracefully (no 3D effect) in IE, though. Until it does not work in common browsers, it’s useless for real websites. Do not build a Webkit-only Web! Just DON’T!
Tapan February 15, 2012 at 12:33

Awesome creativity, excellent experiment of css3 and jQuery. Liked it.
Erik Kullenberg February 15, 2012 at 15:50

Awesome job! Worked GREAT, but with a little lag in Chrome. In Firefox, was VERY buggy. Haven’t checked MSIE.
craig February 15, 2012 at 17:05

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?
- Tanin Hale May 16, 2012 at 02:02
  
  CSS 3D Transform Controls don’t work in IE yet
- Mark Bolden May 26, 2012 at 20:04
  
  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?
Coco February 18, 2012 at 06:56

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
Zoltan February 20, 2012 at 00:39

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.
Asa February 20, 2012 at 11:36

Very nice!

Also see this jQuery plugin to create a similar gallery with lots more options.
Odedra Nils February 20, 2012 at 18:28

very nice !!!!!!!!!!!1
as February 20, 2012 at 22:31

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;
}
Pixelutely March 5, 2012 at 13:21

Oh dear, Firefox doesn’t like this at all. Reboot city.
Nicolas March 7, 2012 at 09:23

Someone try to use it in wordpress ?
- 2F March 28, 2012 at 13:45
  
  Yes, but fail… and you ?
Yuvraj Singh March 13, 2012 at 18:17

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

How it works

Options

Manoela Ilic

Progressive Blur Effect using WebGL with OGL and GLSL Shaders

Some Ideas for Fullscreen Image Slideshow Animations

Dynamic Tooltip Reveal Animations

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

Feedback 69

Feedback ⁶⁹