CSS3的transform+JQuery弄一个翻翻乐小游戏

1、实现思路

翻翻乐的游戏规则要点：1、只能翻开两张图片；2、两张图片一样就保持正面，不一样翻回反面，直至所有图片都翻到正面；

那么首先要准备图片素材，2*2（2对），就是2张图加上1张反面的默认图（共3张，即x对就x+1张）；

然后打乱所有图片的排序，再将图片隐藏只显示默认图片；

给每个图片（img或div标签）添加单击事件，用来执行翻牌动作并判断是否翻对；

 

2、用到的知识点

CSS3：transform，flex布局；

jQuery：选择器，attr()方法，css()方法；

相关链接：

http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

http://www.w3school.com.cn/jquery/jquery_selectors.asp

3、代码

CSS

body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,select,img{ margin: 0; padding:0; }
/*面板*/
#board{
	width:1110px;
	margin:50px auto;
	background-color: gray;
	padding: 50px;
	padding-right: 0px;
	padding-bottom: 0px;
	display: flex;
	flex-flow:row wrap;
	align-content: center;
}
/*img容器*/
.item{
	width:220px;
	height: 325px;
	margin-right: 50px;
	margin-bottom: 50px;
}
/*默认图片，即反面*/
.blank{
	width:220px;
	height: 325px;
	backface-visibility: hidden;
	background-image: url(../img/black.png);
	transition: all 1s;
}
/*正面*/
.content{
	width:220px;
	height: 325px;
	position: relative;
	top:-325px;
	backface-visibility: hidden;
	transform: ro