jQuery图片卡片翻牌动画特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片卡片翻牌动画特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery图片卡片翻牌动画特效</title>

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<style type="text/css">
.contaier{width:640px;height:530px;overflow:hidden;margin: 30px auto;}
.card {
	perspective: 1000;
	-webkit-perspective: 1000;
	width: 100%;
	height:170px;
	overflow:hidden;
	margin-bottom: 10px;
}
#right .card{height:250px;}
.face{
	position: absolute;
	border-radius:5px;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
	backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	background-color: rgb(178, 39, 49);
}
.front {
	z-index: 10;
}
.back{
	transform:rotate3d(0,1,0,-180deg);
	-ms-transform:rotate3d(0,1,0,-180deg);	/* IE 9 */
	-moz-transform:rotate3d(0,1,0,-180deg);	/* Firefox */
	-webkit-transform:rotate3d(0,1,0,-180deg); /* Safari 和 Chrome */
	-o-transform:rotateY(0,1,0,-180deg);	/* Opera */
	z-index: 8;
}
.card-flipped .front{
	transform:rotate3d(0,1,0,180deg);
	-ms-transform:rotate3d(0,1,0,180deg);/* IE 9 */
	-moz-transform:rotate3d(0,1,0,180deg);/* Firefox */
	-webkit-transform:rotate3d(0,1,0,180deg);/* Safari 和 Chrome */
	-o-transform:rotate3d(0,1,0,180deg);	/* Opera */
	z-index: 8;
}
.card-flipped .back{
	transform:rotate3d(0,1,0,0deg);
	-ms-transform:rotate3d(0,1,0,0deg);/* IE 9 */
	-moz-transform:rotate3d(0,1,0,0deg);/* Firefox */
	-webkit-transform:rotate3d(0,1,0,0deg);/* Safari 和 Chrome */
	-o-transform:rotate3d(0,1,0,0deg);	/* Opera */
	z-index: 10;
}
#left{float: left;width:318px;}
#right{float: right;width:318px;}
#right .right-img{
	height: 248px;
	width: 317px;
}
</style>
<!--[if IE]>
	<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>

<div class="contaier">

	<div id="left">
		<div class="cards">
			<div class="card">
				<div class="face front">
					<a href="#">
						<img src="picture/left_1_01.png" class="">
					</a>
				</div>
				<div class="face back cardAK">
					<img src="picture/11.png" class=""> </a>
				</div>
			</div>
			
			<div class="card">
				<div class="face front" style="background-color: rgb(178, 39, 49);">
					<a href="">
						<img src="picture/left_2_01.png" class="">
					</a>
				</div>
				<div class="face back cardAK">
					<a href="">
						<img src="picture/12.jpg" class=""> 
					</a>
				</div>
			</div>
			
			<div class="card">
				<div class="face front" style="background-color: rgb(178, 39, 49);">
					<a href="#">
						<img src="picture/left_3_01.png" class="">
					</a>
				</div>
				<div class="face back cardAK">
					<a href="#">
						<img src="picture/13.jpg" class=""> 
					</a>
				</div>
			</div>
			
		</div>
	</div>


	<div id="right">
		<div class="cards">
			<div class="card">
				<div class="face front">
					<a href="#">
						<img src="picture/right_1_01.png" class="right-img"> 
					</a>
				</div>
				<div class="face back">
					<a href="#">
						<img src="picture/15.jpg" class="right-img"> 
					</a>
				</div>
			</div>
												
			<div class="card">
				<div class="face front">
				<a href="#">
					<img src="picture/right_2_01.png" class="right-img"> 
				</a>
				</div>
				<div class="face back">
					<a href="#">
						<img src="picture/14.jpg" class="right-img"> 
					</a>
				</div>
			</div>										
		</div>
	</div>

</div>

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function () {
	flip();
});
function flip() {
	var timer = null;
	var i = 0;
	var j = 0;
	var aFlip = $(".card");
	function flipFn(arg1, arg2) {
		aFlip.eq(i).toggleClass('card-flipped'); 
		i++;
		if(i==5){
			i=0;
		}
	
	}
	timer = setInterval(flipFn, 2000);
}
</script>
</body>
</html>

CSS代码(default.css):

body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}

附件:下载该文件资源,减少时间成本(增值服务)