Tutorials

Create CSS 3D Transform Card Flip Gallery

Written by Kevin Liew on 16 May 2012
144,391 Views • Shares
42 comments

Introduction

CSS 3D is the new black. There are many CSS tutorials and cool demonstrations out there and if you want to learn this cool new feature, you can check out one of our posts - Embrace the awesome CSS 3D transform.

As for myself, I'm a late adopter and CSS 3D transform has caught my attention lately. I've went through a lot of reading to understand the concept of third dimension, I would say CSS3 implementation of 3D transform is pretty smart. Not too long after that, I was able to make a simple card flip effect, of course, by refering to a tutorial.

This tutorial, we are going to apply card flip effect to a set of thumbnail gallery. We just want to demonstrate one of the simple way to use it. One thing though, CSS 3D transform is not a mature standard yet and only modern browsers are supporting it. As a result, to make this demo usable, we will make it degrade gracefully and replace it with scroll up effect.

Let's get rolling!

HTML

We will try to keep it as simple as possible. We have an IMG and a DIV called .thumb-detail, they also can be referred as Front and Back. Another DIV called .thumb-wrapper, this DIV is the one we going to flip. Lastly, another DIV called .thumb which allow us to set perspective.

<div class="thumb scroll">
	<div class="thumb-wrapper">
		<img src="images/img.jpeg" alt="" />
		<div class="thumb-detail">
			<a href="#">
				... content ...
			</a>				
		</div>
	</div>
</div>	

CSS

The most tricky part of CSS is to separate the general styling, scrolling effect styling and CSS3 card flip effect styling. First part of the CSS, is the general styling. Second part is the scrolling effect styling. As you can see .thumb-detail class' bottom position is set to -280px (height of the thumbnail) just to accomodate the scroll up effect.

.thumb {
	display:block;
	width:200px;
	height:140px;
	position:relative;
	margin-bottom:20px;
	margin-right:20px;
	float:left;
}

	.thumb-wrapper {
		display:block;
		width:100%;
		height:100%;
	}

	.thumb img {
		width:100%;
		height:100%;
		position:absolute;
		display:block;			
				
	}
	
	.thumb .thumb-detail {
		display:block;
		width:100%;
		height:100%;
		position:absolute;			
		background:#fff;		
	}
		

/*
* Without CSS3 Scroll Up Effect
*/
.thumb.scroll {
	overflow: hidden;
}	

	.thumb.scroll .thumb-detail {
		bottom:-280px;
	}

Lastly, the third part of the CSS which is the CSS 3D transform. Perspective is applied in .thumb, and to make sure all its children to inherit a parent's perspective, we need transform-style: preserve-3d. We also need to use backface-visibility: hidden to hide the back-side of both Front (IMG) and Back (.thumbnail-wrapper).

.thumb-detail is flipped in y-axis -180deg, imagine you have two cards, stick the back of the card together and you will understand why it need to be flipped -180deg. Finally, we add transition to .thumb-wrapper and create a class called .flipit.

/*
* CSS 3D Card Flip Effect
*/	
.thumb.flip {
	perspective:800px;
}

	.thumb.flip .thumb-wrapper {
		transition: transform 1s;
		transform-style: preserve-3d;			
	}
	
	.thumb.flip .thumb-detail {
		transform: rotateY(-180deg);			   			
	}
	
	.thumb.flip img,
	.thumb.flip .thumb-detail {
		backface-visibility: hidden;
	}
	
	.thumb.flip .flipIt {
		transform: rotateY(-180deg);			
	}

This 3D effect will be activated by adding .flip class to .thumb-wrapper. If you want to know more about the card flip and other effects, check out this tutorial from David DeSandro, I picked it up from there.

Javascript

One of the roles of Javascript is to detect CSS 3D transform support. We are using Modernzr here. Modernzr is an open source Javascript library that come with a lot of features to support the next generation of HTML5 and CSS3-powered websites. It's a powerful tool, but in this tutorial we only use its browser features detection.

Basically, this script toggle between effects. If CSS 3d Transform is supported, it will be a showtime for card flip, otherwise it will show a simple and elegant scroll up effect.

$(function () {

	// Utilize the modernzr feature support class to detect CSS 3D transform support
	if ($('html').hasClass('csstransforms3d')) {	
	
		// if it's supported, remove the scroll effect add the cool card flipping instead
		$('.thumb').removeClass('scroll').addClass('flip');		
		
		// add/remove flip class that make the transition effect
		$('.thumb.flip').hover(
			function () {
				$(this).find('.thumb-wrapper').addClass('flipIt');
			},
			function () {
				$(this).find('.thumb-wrapper').removeClass('flipIt');			
			}
		);
		
	} else {
		
		// CSS 3D is not supported, use the scroll up effect instead
		$('.thumb').hover(
			function () {
				$(this).find('.thumb-detail').stop().animate({bottom:0}, 500, 'easeOutCubic');
			},
			function () {
				$(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic');			
			}
		);

	}

});

Conclusion

That's it, simple and elegant. Even though CSS 3D transform isn't supported by old browsers, it doesn't mean we can't use it. As long as we have a backup plan for them and make sure it degrade gracefully, you will still able to use it. One thing I discovered though, some of the modern browsers, they don't render 3D transform well, that's would be something you have to keep in mind. Hope this tutorial will stimulate your urge to learn CSS 3D transform, thanks for reading.

For more tutorials and Javascript resources, stay tuned with queness!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

42 comments
frozeman 8 years ago
just wondering, if you just could use the pseudo-class :hover to do the trick.
i think removing the scroll and flip classes and use a hover statement instead would do the trick too?

so you don't need any JS.
when you dont have css3 transform, it would do nothing, but be scrollable.
Reply
Kevin Liew Admin 8 years ago
Yes, it's possible to use hover only, but you can only make one of the effect working because the styling for both effect is totally different.
Reply
Theodore Vorillas 8 years ago
Nice tutorial, on chrome, the slides are unexpectedly blinking
Reply
Rex 7 years ago
Thanks you made me learn 3D transforms. I was a noob in it but after looking at your tutorial I learned it and now I made some cool stuff with it.

http://www.webstutorial.com/css3-visiting-card-3d-transform/css3

Thanks for making me learn
Reply
Davide Lorigliola 7 years ago
Hi! This is fantastic tutorial!! But how if I would flip 3 faces instead of 2?

Many thanks,

Davide
Reply
Adriano 7 years ago
Hi, very nice tutorial, congrats! Although I've implemented it on my website http://capec.org.br/site/doacoes-para-a-capec/ but javascript fallback is not working on IE 7, 8, 9 and on IE 10 the flip effect does not work at all. I'd really appreciate any help as I'm not an expert developer. Thanks in advance.
Reply
Kevin Liew Admin 7 years ago
Hi Adriano, if you run the demo, you should see it work on IE7,8.
I checked lunar.js, and I suspect it's because you didn't change the dollar sign to jquery

$(this).height() * -1).

I pretty sure my script work in IE because i have tested it quite often while writing this tutorial.
Reply
tavax 7 years ago
I confirm, it didn't work on IE when I run the demo (I didn't DL the script and changing the dollar sign)
Reply
gastonmz 7 years ago
Congrats for the tutorial, but isn't work on any IE :(, even the demo.
Reply
Sze Chuan 7 years ago
Hi, awesome tutorial , is there anyway to use click to flip instead of using the hover function ?
Reply
Alex 7 years ago
Is it possible to use a click event instead of hover? Also, it flickers on chrome.
Reply
Marc Dick 6 years ago
$(function () {


if ($('html').hasClass('csstransforms3d')) {

$('.thumb').removeClass('scroll').addClass('flip');
$('.thumb.flip').click(function(){
var iteration=$(this).data('iteration')||1
switch ( iteration) {
case 1:
$(this).find('.thumb-wrapper').addClass('flipIt');
break;

case 2:
$(this).find('.thumb-wrapper').removeClass('flipIt');
break;
}
iteration++;
if (iteration>2) iteration=1
$(this).data('iteration',iteration)
});

} else {

$('.thumb').click(function(){
var iteration=$(this).data('iteration')||1
switch ( iteration) {
case 1:
$(this).find('.thumb-detail').stop().animate({bottom:0}, 500, 'easeOutCubic');
break;
case 2:
$(this).find('.thumb-detail').stop().animate({bottom: ($(this).height() * -1) }, 500, 'easeOutCubic');
break;
}
iteration++;
if (iteration>2) iteration=1
$(this).data('iteration',iteration)
});
}

});


Reply
Rachel 7 years ago
Hello! Thank you for this plugin! I was wondering if you could help me make them automatically flip at different times? I know basic javascript, but I can't seem to get it to work. Thanks!
Reply
benito 7 years ago
James 7 years ago
I honestly dont know what the hell im doing. Not straight forward for beginners.
Reply
Elizabeth 7 years ago
Hello !

I really like your tutorial !
I was wondering if it possible to combine the gallery with a lightbox ?
If it is, how to do it ?

Thanx anyway :)
Reply
Kevin Admin 7 years ago
Yes Elizabeth. You can use fancybox. Just follow the instruction from fancybox and update the link in this script.

http://fancyapps.com/fancybox/
Reply
Craig du Toit 7 years ago
Hi there!

Thanks for an amazing tutorial, absolutely loving the results.

One question though, how would I go about making it flip onclick instead of the hover state?

Thanks! :D
Reply
Bashir Akle 7 years ago
Hi!,
I liked so much the tutorial, and i was making this same example, but I donĀ“t know why works perfect in firefox, but in chrome, and IE doesn't.
If you can help me, it will be great!

Thanks
Reply
Purnodepurno 7 years ago
Don't forget the vendor prefixes
Reply
AnyDog 6 years ago
Yeah, I forgot that and it didn't work in Chrome. With prefixes, everything works like a charm.
Thanks !
Reply