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 data-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!

• TAGS:
• Animation
• CSS
• CSS3
• HTML
• Javascript
• jQuery