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

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

主要用到的css3代码如下：

html结构：

 <div class="container">
      <div class="side">

         <div class="front">
           <!-- 正面 -->
         </div>

         <div class="back">
           <!-- 反面 -->
         </div>

      </div>
   </div>

对这部分设置的样式：

.container {
  perspective:;
}

.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结构：

 <div class="container">

         <div class="side">
             <div class="front"><img src="data:images/face.jpg"></div>
             <div class="back"><img src="data:images/1.jpg"></div>
         </div>
         .../*中间代码同上，省略*/
 </div>

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

 $(function(){

     var list=$(".side"),
         count=0;

     for(var i=0;i<list.length;i++){

         var t=0,
             str=[],
             p=[];

         list[i].flag="ok";
         list[i].index=i;

         list[i].onclick=function(){

             if(this.flag==null){
                 this.onclick=function(){}
             }
             else{

                t++;
                str[t]=this.innerHTML;
                p[t]=this.index;

                if(this.flag==="ok"){

                   $(this).css("transform"," rotateY(180deg)");
                    this.flag="error";

                 }else if(this.flag==="error"){
                   $(this).css("transform"," rotateY(0deg)");
                   this.flag="ok";
                 }

                if(t==2){

                     if(str[1]!=str[2]){
                         setTimeout(function(){

                             $(list[p[1]]).css("transform"," rotateY(0deg)");
                             $(list[p[2]]).css("transform"," rotateY(0deg)");
                              t=0;

                         },500);

                         list[p[1]].flag="ok";
                         list[p[2]].flag="ok";

                      }else{
                             count+=2;
                             list[p[1]].flag=null;
                             list[p[2]].flag=null;

                             if(count==list.length){
                                 alert("恭喜你过关！");
                             }
                             t=0;
                     }

                }
              }
           }

     }

  })

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