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

31 comments

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

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