翻牌部分的要点：

html5 animate for game @H_607_6@@H_607_6@

翻牌关键css

父级元素设置3D视角：@H_607_6@

-webkit-perspective: 1000;
perspective: 1000;

CSS @keyframes 规定动画（各种浏览器记得加前缀）:@H_607_6@

@keyframes flipintoleft {
        from { transform: rotateY(-90deg) scale(.9); }
        to { transform: rotateY(0); }
    }

使用：@H_607_6@

.flip {
    -webkit-BACkface-visibility: hidden;
    -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
    BACkface-visibility: hidden;
    transform: translateX(0);
}

.flip.out {
-webkit-transform: rotateY(-90deg) scale(.9);
-webkit-animation-name: flipouttoleft;
-webkit-animation-duration: 175ms;
transform: rotateY(-90deg) scale(.9);
animation-name: flipouttoleft;
animation-duration: 175ms;

}@H_607_6@

翻牌html

<div class="viewport-flip">
   <a href="#" class="flip out"><img src="images-BACk.jpg" alt="背面"></a>
   <a href="#" class="flip"><img src="images.jpg" alt="正面"></a>
</div>

翻牌js

通过js来切换样式达到动画效果@H_607_6@

if ($(this).hasClass("out")) {
                    eleBACk = $(this);
                } else {
                    eleFront = $(this);
                }

开宝箱要点

html5 animate for game @H_607_6@@H_607_6@@H_607_6@

定位图片中的各个数字Y坐标

var step = (imgH/10).toFixed(2),posArr = [];
    //数字位置
    for(var i=0;i<=9;i++){
        posArr[i] = steP*i;
    }

生产三个随机数，根据随机数计算图片Y坐标，滚动到位置

n1 = Math.round(R_97_11845@ath.random()*9);
...
finPos_1 = posArr[n1]
...
$("#mation-1").animate({"top":"-"+finPos_1+"px"},1000);
...
$("#mation-1").attr("date-num",n1);

播放音乐

<audio id="openAudio" src="slot.mp3" preload="preload"></audio>
document.getElementById("openAudio").play();

手指滑动

用了插件
jquery.touchSwipe.min.js@H_607_6@

$("#mation-1,#mation-2,#mation-3").swipe({
        swipe:function(event,direction,distance,duration,fingerCount,fingerData) {
          slotSwipe($(this),direction); 
        },threshold:2
      });


//手指滑动方向函数   
var slotSwipe =function(obj,dir){
        var dNum =parseInt(obj.attr("date-num"));
        if(dir == "down"){
                dNum--;
                if(dNum < 0){
                    return false;
                }
        }else if(dir == "up"){
                dNum++;
                if(dNum > 9){
                    return false;
                }
        }
        obj.attr("date-num",dNum);
        obj.animate({"top":"-"+posArr[dNum]+"px"},100);
    }