CSS 3d转换卡翻转动画

本教程中,我们将卡片翻转效应应用于一组缩略图画廊。
我们只是想展示一个简单的方法来使用它。一件事,CSS 3 d转换还没有一个成熟的标准,只有高级版本浏览器支持它。
HTML
<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
.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;
	}

最后是CSS的CSS 3 d转换
.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);			
	}
JavaScript
$(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');			
			}
		);

	}

});