Create CSS 3D Transform Card Flip Gallery

Create CSS 3D Transform Card Flip Gallery


Create CSS 3D Transform Card Flip Gallery

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!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

33 comments

frozeman
Wed, 23rd May 2012
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
Wed, 23rd May 2012
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
Fri, 25th May 2012
Nice tutorial, on chrome, the slides are unexpectedly blinking Reply
Rex
Thu, 2nd August 2012
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
Mon, 6th August 2012
Hi! This is fantastic tutorial!! But how if I would flip 3 faces instead of 2?

Many thanks,

Davide Reply
Adriano
Tue, 28th August 2012
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
Mon, 3rd September 2012
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
Tue, 4th December 2012
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
Wed, 12th December 2012
Congrats for the tutorial, but isn't work on any IE :(, even the demo. Reply
Sze Chuan
Thu, 29th November 2012
Hi, awesome tutorial , is there anyway to use click to flip instead of using the hover function ? Reply
Alex
Wed, 2nd January 2013
Is it possible to use a click event instead of hover? Also, it flickers on chrome. Reply
Marc Dick
Wed, 5th February 2014
$(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
Fri, 1st February 2013
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
Mon, 4th March 2013
For Wordpress this one has worked for me: http://codecanyon.net/item/flipping-cards-3d-wordpress/4135044 Reply
James
Tue, 12th March 2013
I honestly dont know what the hell im doing. Not straight forward for beginners. Reply
Elizabeth
Thu, 4th April 2013
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
Thu, 4th April 2013
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
Tue, 16th April 2013
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
Wed, 17th April 2013
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
Mon, 22nd April 2013
Don't forget the vendor prefixes Reply
AnyDog
Mon, 26th August 2013
Yeah, I forgot that and it didn't work in Chrome. With prefixes, everything works like a charm.
Thanks ! Reply
machine2024
Fri, 3rd May 2013
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
Fri, 3rd May 2013
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
Fri, 10th May 2013
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
Sun, 26th May 2013
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
Mon, 9th December 2013
You are the man. You saved me a ton of time. Thank a lot! Reply
Sam
Fri, 10th May 2013
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
Wed, 13th November 2013
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
Mon, 18th November 2013
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
Sat, 1st February 2014
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
Thu, 27th February 2014
may i know how to make it auto random?
is possible? Reply
Jim
Wed, 21st May 2014
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
Tue, 1st July 2014
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

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement