css3下的转盘

/*LESS*/
/*.rotate(@deg,@top:0,@left:0){  
transform: rotate(20*(round(@deg)-1)+@deg*25deg);
-webkit-transform: rotate(20*(round(@deg)-1)+@deg*25deg);
-moz-transform: rotate(20*(round(@deg)-1)+@deg*25deg); 
top:@top * 1px;  left:@left * 1px;  text-align: center;}
#game #lucky{  position: relative;  width:260px;  height:260px;  background-image:url("/images/lucky.png");    margin: auto;}
#game #lucky{
  #lucky1{.rotate(1,22,124);}
  #lucky2{.rotate(2,59,162);}
  #lucky3{.rotate(3,110,164);}
  #lucky4{.rotate(4,146,124);}
  #lucky5{.rotate(5,148,74);}
  #lucky6{.rotate(6,110,38);}
  #lucky7{.rotate(7,62,39);}
  #lucky8{.rotate(8,23,77);}
}
#game  span[id^="lucky"]:not(:last-child) {  color:red;  position: absolute;  display: block;  width: 60px;  height: 90px;}
#game #luckyPoint{  position: absolute;  display:block;  width:1px;  height:1px;  left:130px;  top:130px;  transform: rotate(0deg);}
#game #luckyPoint  #luckyPointImg{  position: absolute;  top:-54px;  left:-24px;  cursor: pointer;}
#game .frBtn{  background:#E21818;  color:#FFF;  height:20px;  font-size: 12px;  border-radius: 0px;  padding:0px;  width: 60px;  text-align: center;}*/


#game #lucky {
  position: relative;
  width: 260px;
  height: 260px;
  background-image: url("/images/lucky.png");
  margin: auto;
}
#game #lucky #lucky1 {
  transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  -moz-transform: rotate(25deg);
  top: 22px;
  left: 124px;
  text-align: center;
}
#game #lucky #lucky2 {
  transform: rotate(70deg);
  -webkit-transform: rotate(70deg);
  -moz-transform: rotate(70deg);
  top: 59px;
  left: 162px;
  text-align: center;
}
#game #lucky #lucky3 {
  transform: rotate(115deg);
  -webkit-transform: rotate(115deg);
  -moz-transform: rotate(115deg);
  top: 110px;
  left: 164px;
  text-align: center;
}
#game #lucky #lucky4 {
  transform: rotate(160deg);
  -webkit-transform: rotate(160deg);
  -moz-transform: rotate(160deg);
  top: 146px;
  left: 124px;
  text-align: center;
}
#game #lucky #lucky5 {
  transform: rotate(205deg);
  -webkit-transform: rotate(205deg);
  -moz-transform: rotate(205deg);
  top: 148px;
  left: 74px;
  text-align: center;
}
#game #lucky #lucky6 {
  transform: rotate(250deg);
  -webkit-transform: rotate(250deg);
  -moz-transform: rotate(250deg);
  top: 110px;
  left: 38px;
  text-align: center;
}
#game #lucky #lucky7 {
  transform: rotate(295deg);
  -webkit-transform: rotate(295deg);
  -moz-transform: rotate(295deg);
  top: 62px;
  left: 39px;
  text-align: center;
}
#game #lucky #lucky8 {
  transform: rotate(340deg);
  -webkit-transform: rotate(340deg);
  -moz-transform: rotate(340deg);
  top: 23px;
  left: 77px;
  text-align: center;
}
#game span[id^="lucky"]:not(:last-child) {
  color: red;
  position: absolute;
  display: block;
  width: 60px;
  height: 90px;
}
#game #luckyPoint {
  position: absolute;
  display: block;
  width: 1px;
  height: 1px;
  left: 130px;
  top: 130px;
  transform: rotate(0deg);
}
#game #luckyPoint #luckyPointImg {
  position: absolute;
  top: -54px;
  left: -24px;
  cursor: pointer;
}
#game #luckyPoint.active0 {
  transform: rotate(0deg);
}
#game #luckyPoint.active1 {
  transition: all 2s ease-out;
  transform: rotate(200deg);
}
#game #luckyPoint.active3 {
  transition: all 0.5s;
  transform: rotate(360deg);
}
#game .frBtn {
  background: #E21818;
  color: #FFF;
  height: 20px;
  font-size: 12px;
  border-radius: 0px;
  padding: 0px;
  width: 60px;
  text-align: center;
}

<div id="game">
    <div style="width:100%;text-align:center;   background: #E21818;  color: #FFF;" >幸运转转转</div>
    <div id="lucky">
        <span id="lucky1">抽奖</span>
        <span id="lucky2">抽奖</span>
        <span id="lucky3">抽奖</span>
        <span id="lucky4">抽奖</span>
        <span id="lucky5">抽奖</span>
        <span id="lucky6">抽奖</span>
        <span id="lucky7">抽奖</span>
        <span id="lucky8">抽奖</span>
        <span id="luckyPoint"><img  id="luckyPointImg" src="/images/luckyPoint.png"/></span>
    </div>
            <a class="btn pull-right frBtn">邀请好友</a>
</div>
 

function $(id){
    var idtr=id.substring(1);
    return document.getElementById(idtr);
}
//点击触发转盘
$("#luckyPointImg").onclick=function(){
    var nun=Math.random()*100%8;//随机数;
    var re=0;
 //re=1中奖，re=0未中奖
    switch(Math.floor(nun)){
      case 0:        re=0;        break;
      case 1:        re=1;        break;
      case 2:        re=0;        break;
      case 3:        re=1;        break;
      case 4:        re=0;        break;
      case 5:        re=0;        break;
      case 6:        re=0;        break;
      case 7:        re=1;        break;
    }
//转盘---------------------------------------
    var r= 0 /*角度*/, cr= 0 /*圈数*/,end= 0,degF= 0,degE=90;
    var deg=parseFloat(nun)*45;//最后一圈的角度;

    //确认最后的转圈角度
    if(deg<180){degF=360;degE=deg;}
    else{degF=270+parseFloat(deg);}
    $("#luckyPoint").style.cssText= "transform:rotate(0deg);";

    var IN=setInterval(degCir,10);

    //循环结构
    function degCir(){
      $("#luckyPoint").style.cssText="transform:rotate("+ r +"deg);";
      console.log("r:"+r);

      if(end==0){
        if(cr==3){
          end=1;//快速3圈结束，进入第二速度圈
        }
        if(r==360&&end==0){
          r=0;
          cr++;  }
        else{   r=r+10;
          console.log("r:"+r); }
      }
      if(end==1){
        if(r>=degF){
        end=2;}//第二速度圈结束，进入最后确定圈
        else{r=r+3}
      }
      if(end==2){
        if(r>=degF+degE){
          if(re==1)alert("恭喜你中奖了")
          else{alert("没中奖，再试试吧！")}
          clearInterval(IN);}
        else{r=r+1;}
      }
    }
  }