Tutorials

Create CSS 3D Transform Card Flip Gallery

Written by Kevin Liew on 16 May 2012
144,389 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
machine2024 7 years ago
its great but it wont work in ie at all !!! no even ie 10 !!!
please some solution !!! I use it in new web site and will be a big problem !!!
Reply
Machine2024 7 years ago
now I check in other old ie 7 ,8 , 9 work
only 10 !! it make the flip not full that's the other side don't appear
also it looks ugly please find a slotion at lest to work as the old ies
Reply
Sam 7 years ago
For a temporary IE10 solution I did this...

I added an .ie10 class to the html element:
<!--[if !IE]><!--><script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->


and excluded the flip effect in the jquery script by changing the first line as follows:


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


this excludes IE10 and lets it work with the fallback scroll effect until we all find a solution that works for IE10.
Hope this helps a bit.
Reply
Dreb 7 years ago
You may try to re-assign the transform (CSS3) attributes to match the structure as in this link (IE10 compatible): http://cssdeck.com/labs/gddxuzki

I gave it a try and came out with this:

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

.thumb.flip .thumb-wrapper img,
.thumb.flip .thumb-wrapper .thumb-detail {
-webkit-transition:1.5s ease-in-out;
-moz-transition:1.5s ease-in-out;
transition:1.5s ease-in-out;
}
.thumb.flip .thumb-wrapper img {
-moz-transform:perspective(800px) rotateY(0deg);
-webkit-transform:perspective(800px) rotateY(0deg);
transform:perspective(800px) rotateY(0deg);
}

.thumb.flip .thumb-detail {
-moz-transform:perspective(800px) rotateY(180deg);
-webkit-transform:perspective(800px) rotateY(180deg);
transform:perspective(800px) rotateY(180deg);
}

.thumb.flip img,
.thumb.flip .thumb-detail {
-moz-backface-visibility:hidden;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}
.thumb.flip .flipIt img {
-webkit-transform:perspective(800px) rotateY(-179.9deg);
-moz-transform:perspective(800px) rotateY(-179.9deg);
transform:perspective(800px) rotateY(-179.9deg);
}
.thumb.flip .flipIt .thumb-detail {
-moz-transform:perspective(800px) rotateY(0);
-webkit-transform:perspective(800px) rotateY(0);
transform:perspective(800px) rotateY(0);
}

Hope it works for you as well.
Reply
Jake 6 years ago
You are the man. You saved me a ton of time. Thank a lot!
Reply
Sam 7 years ago
On IE10 the front page is actually mirrored and the backside doesn't show at all (on my website as well as your demo). Is there any solution to that? Any help would be greatly appreciated :)
Reply
Lucas 6 years ago
Hello,

I enjoyed the tutorial, congratulations! but not working in IE.

Follow the link of the page

http://atendimentodireto.com.br/abinee/50.htm

Also I tested the demo and did not work in IE.

Have you any idea what could be?
Reply
Hatori 6 years ago
Hello developers! It's a great script but... it doesn't work in IE10 and Opera 12.16. I try to implement alternative code from this discussion but it still doesn't work.
I implement Card flip gallery into Joomla 3.1.5... if you want I send link to my project to see where to problem can be...
Reply
philboy 6 years ago
It's a good thing nobody uses IE10 then isn't it! Chrome and Firefox have the majority share so don't even worry about it.
Reply
jeff 6 years ago
may i know how to make it auto random?
is possible?
Reply
Jim 6 years ago
After Some diggin I found a solution using modernizr

(function (Modernizr, win) {
Modernizr.addTest('csstransformspreserve3d', function () {

var prop = Modernizr.prefixed('transformStyle');
var val = 'preserve-3d';
var computedStyle;
if (!prop) return false;

prop = prop.replace(/([A-Z])/g, function (str, m1) {
return '-' + m1.toLowerCase();
}).replace(/^ms-/, '-ms-');

Modernizr.testStyles('#modernizr{' + prop + ':' + val + ';}', function (el, rule) {
computedStyle = win.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : '';
});

return (computedStyle === val);
});
}(Modernizr, window));

$('#result').text('preserve-3d supported: ' + Modernizr.csstransformspreserve3d);

From: http://jsfiddle.net/bartaz/e3Rjz/

Updated Example: http://jsfiddle.net/bartaz/e3Rjz/
Reply
Sminky Pinky 5 years ago
Hey There, GREAT Tutorial, and all the responses have helped me get this working in IE as well, question though: How can i make it so the size of the thumbnails (and spin) are decided by a percentage of the area they have to be placed in, I ask mainly as i want this to change shape for different mobile devices. Any ideas?
Reply
Imran 5 years ago
3D flip is not working. Any quick update please? if possible then please reply your solution at "imran_flashguy2@yahoo.com" thanks
Reply
Imran 5 years ago
Hi, I have already requested that 3d flip is not working. I am already using in one website, how can we fix the 3d flip. Your quick reply will be highly appreciated. Either post the fix here or email me. Thanks
Reply
Imran 5 years ago
Hi, I have already requested that 3d flip is not working. I am already using in one website, how can we fix the 3d flip. Your quick reply will be highly appreciated. Either post the fix here or email me. Thanks
Reply
adi 5 years ago
It stop working on chrome. When i integrate this one, it work fine on all bowers, but today i find it not working on chrome. the flip effect not more working in chrome now.

http://peekboutique.co.uk/

This is the url. Thanks
Reply
Daniel 5 years ago
Now this script doesnt work in the new version of Chrome (VersiĆ³n 37.0.2062.103) what can we do?
Reply