主要是为了练习一下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。