css3+jquery+js做的翻翻乐小游戏

主要是为了练习一下css3的3D翻转功能，就做了这么个小游戏，做的比较粗糙，但是效果看的见。

主要用到的css3代码如下：

html结构：

 1 <div class="container">
 2      <div class="side">
 3 
 4         <div class="front">
 5           <!-- 正面 -->
 6         </div>
 7 
 8         <div class="back">
 9           <!-- 反面 -->
10         </div>
11 
12      </div>
13   </div>

对这部分设置的样式：

.container {
  perspective: 1000;
}
 
.container:hover .side{  
   transform: rotateY(180deg);
}

.container, .front, .back {
  width: 320px;
  height: 480px;
}

.side {
  transition: 0.6s; /*完成翻转所用的时间*/
  transform-style: preserve-3d;  /*让其子元素有3D翻转的效果。*/
  position: relative;
}

.front, .back {
  backface-visibility: hidden; /*将反转了180度的隐藏*/
  position: absolute;
}

.front {
  background-color: red;
}

.back {
  transform: rotateY(180deg);
  background-color: blue;
}

这样，只要鼠标移入.container就会发生3D翻转；这个游戏中略有不同，是点击之后翻转，代码如下：
html结构：

1 <div class="container">
2 
3         <div class="side">
4             <div class="front"><img src="images/face.jpg"></div>
5             <div class="back"><img src="images/1.jpg"></div>
6         </div>
7         .../*中间代码同上，省略*/
8 </div>

js部分：
注意要引入jquery库，

 1 $(function(){
 2 
 3     var list=$(".side"),
 4         count=0;
 5 
 6     for(var i=0;i<list.length;i++){
 7 
 8         var t=0,
 9             str=[],
10             p=[];
11 
12         list[i].flag="ok";
13         list[i].index=i;
14 
15         list[i].onclick=function(){
16 
17             if(this.flag==null){
18                 this.onclick=function(){}
19             }
20             else{
21 
22                t++;
23                str[t]=this.innerHTML;
24                p[t]=this.index;
25                
26                if(this.flag==="ok"){
27 
28                   $(this).css("transform"," rotateY(180deg)");
29                    this.flag="error";
30 
31                 }else if(this.flag==="error"){
32                   $(this).css("transform"," rotateY(0deg)");
33                   this.flag="ok";
34                 }
35 
36               
37                if(t==2){
38 
39                     if(str[1]!=str[2]){
40                         setTimeout(function(){
41 
42                             $(list[p[1]]).css("transform"," rotateY(0deg)");
43                             $(list[p[2]]).css("transform"," rotateY(0deg)");
44                              t=0;
45                           
46                         },500);
47                     
48                         list[p[1]].flag="ok";
49                         list[p[2]].flag="ok";
50 
51                      }else{
52                             count+=2;
53                             list[p[1]].flag=null;
54                             list[p[2]].flag=null;
55 
56                             if(count==list.length){
57                                 alert("恭喜你过关！");
58                             }
59                             t=0;
60                     }
61                 
62                }
63              }
64           }
65       
66     }
67 
68  })

css部分主要的代码上面已经做过说明了，不再重复了，完整代码，请参见https://github.com/zhangyudan/js_jquery_css3-game。

css3+jquery+js做的翻翻乐小游戏

推荐阅读