Css3+jquery+js to do the turn-over music games

Mainly in order to practice the CSS3 3D flip function, do this little game, do more rough, but the results see.

The main use of the CSS3 code is as follows:

HTML structure:

1 <Divclass= "Container">2      <Divclass= "side">3 4         <Divclass= "Front">5           <!--Front -6         </Div>7 8         <Divclass= "Back">9           <!--Reverse -Ten         </Div> One  A      </Div> -   </Div>

The Styles for this section setting:

. Container{Perspective: +;}. Container:hover. Side{Transform:Rotatey (180deg);}. Container,. Front,. Back{width:320px;Height:480px;}. Side{transition:0.6s;/*the time it took to complete the rollover*/Transform-style:preserve-3d;/*let the child element have the effect of the rotation. */position:relative;}. Front,. Back{backface-visibility:Hidden;/*will reverse the 180-degree hidden*/position:Absolute;}. Front{Background-color:Red;}. Back{Transform:Rotatey (180deg);Background-color:Blue;}

This way, as long as the mouse is moved in. Container will happen 3D flip; this game is slightly different, is to flip after clicking, the code is as follows:
HTML structure:

1 <Divclass= "Container">2 3         <Divclass= "side">4             <Divclass= "Front"><imgsrc= "Images/face.jpg"></Div>5             <Divclass= "Back"><imgsrc= "Images/1.jpg"></Div>6         </Div>7 .../* Intermediate code ibid., omitted * /8 </Div>

JS section:
Note To introduce the jquery library,

1$(function(){2 3     varlist=$ (". Side"),4Count=0;5 6      for(vari=0;i<list.length;i++){7 8         varT=0,9Str=[],Tenp=[]; One  AList[i].flag= "OK"; -list[i].index=i; -  thelist[i].onclick=function(){ -  -             if( This. flag==NULL){ -                  This. onclick=function(){} +             } -             Else{ +  At++; atstr[t]= This. InnerHTML; -p[t]= This. Index; -                 -                if( This. flag=== "OK"){ -  -$( This). CSS ("transform", "Rotatey (180deg)")); in                     This. flag= "Error"; -  to}Else if( This. flag=== "Error"){ +$( This). CSS ("transform", "Rotatey (0deg)")); -                    This. flag= "OK"; the                 } *  $               Panax Notoginseng                if(t==2){ -  the                     if(str[1]!=str[2]){ +SetTimeout (function(){ A  the$ (list[p[1]]). CSS ("transform", "Rotatey (0deg)"); +$ (list[p[2]]). CSS ("transform", "Rotatey (0deg)"); -T=0; $                            $},500); -                      -List[p[1]].flag= "OK"; theList[p[2]].flag= "OK"; - Wuyi}Else{ thecount+=2; -list[p[1]].flag=NULL; Wulist[p[2]].flag=NULL; -  About                             if(count==list.length) { $Alert ("Congratulations on your clearance!") "); -                             } -T=0; -                     } A                  +                } the              } -           } $        the     } the  the})

CSS part of the main code has been described above, no longer repeat, the complete code, see Https://github.com/zhangyudan/js_jquery_css3-game.

Css3+jquery+js to do the turn-over music games