翻牌效果

效果演示网址：https://julsejiang.github.io/Play_Card/
完整项目源码：https://github.com/JulseJiang/Play_Card

---

下面是关键代码

html

<section id="game">
		<div id="card">
		<div class="card ">
			<div class="face back rotate"></div>
			<!--牌底：显示牌数值的-->
			<div class="face front"></div>
			<!--牌面：隐藏牌数值-->
		</div>
	</div>
</section>

css实现牌面和牌底两张图片重合

/*游戏面板*/
#game{
	width: 502px;
	height: 420px;
	margin-top:30%;
	background-image: url(../imges/table.jpg);
	border: #666 solid 1px;
	border-radius: 10px;
}
#card{
	position: absolute;
	margin: auto;
	color: white;
	text-align: center;
	text-align: -webkit-center;
}
.card{
	width: 80px;
	height: 120px;
	position: absolute;
}
/*牌面和牌低容器*/
.face{
	width: 100%;
	height: 100%;
	border-radius: 10px;
	position: absolute;
}
/*牌面*/
.front{
	background-color: #999;
	background: url(../imges/deck.png);
	width: 80px;
	height: 120px;
	background-position: 0 -480px;
	transition: all 1s;
}
/*牌底*/
.back{
	background-color: #efefef;
	width: 80px;
	height: 120px;
	background: url(../imges/deck.png) no-repeat;
	transition: all 1s;
}

css关于翻转的动画效果

.rotate{
	transform: rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}
.rotate_back{
	transform: rotateY(-180deg);
	-webkit-transform: rotateY(-180deg);
}

javascript绑定点击事件

$('.card').bind('click', function() {
		if(rest_time==0){
			alert('挑战失败');
			refresh();
			return;
		}
		if(--rest_time<10){
			$rest_time.text("0"+rest_time);
		}else{
			$rest_time.text(--rest_time);
		}
		temper.push($(this));
		console.log("点击face");
		var $taget0 = $(this).find('div:eq(0)').removeClass('rotate'); //正面
		var $taget1 = $(this).find('div:eq(1)').addClass('face_hidden rotate'); //背面
		var val = $(this).attr('data-value');
		record.push(val);
		if(record.length == 2) {
			if(!(temper[0].is(temper[1]))){
				//如果说要判断是否同一对象，当然是用 === 来判断，
				//但实际上两个不同的 jQuery 对象
				//可能是对同一个/组 DOM 对象的封装，
				//这个时候可以用 is 来判断
				juge(temper,record);
			}else{
				record.pop();
				temper.pop();
				return;//返回主函数
			}
			record = []; //清空记录
			temper = [];
		}
	});

效果图