做到一个活动，需要转盘抽奖，于是想到使用css3的动画效果，其中主要包含transition的动画过渡，transform的rotate的旋转效果，在这里只用到2d的旋转，
特别强调的是，因为需要和后台做交互，是后台决定你获得什么奖然后把结果传给前台，还是前台决定你获得什么奖把内容传给后台，这里需要你们自行决定，我在这里使用的是后台决定获奖内容，然后前台控制角度。
这里，我设定转盘在3秒内转5圈，然后计算几等奖，然后转盘转到相应位置。agax属于请求中奖代号，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转</title> <style type="text/css" media="screen"> *{ margin: 0;padding: 0; } #parent{ position: relative; width: 310px; height: 310px; } #rotate{ width: 310px; height: 310px; transition: all 3s; } #zhen{ position: absolute; left: 86px; top: 65px; width: 130px; height: 154px; } .aa{ width: 130px; height: 154px; } </style> <script src="jquery.min.js" type="text/javascript" ></script> </head> <body> <div id="parent"> <div id="rotate"><img src="0.png"></div> <div id="zhen"><img class="aa" src="pointer2.png"></div> </div> <script type="text/javascript"> $(function(){ var bTag = 0;//点击次数 $('#zhen').click(function(){ // $.ajax({ // url:'', // type:'get', // data:{ // userId:userId // }, // success:function(data){ // if(data.result){ // console.log('您有一次抽奖机会'); // //5quan=1800 最低旋转180度 // if(data.code == 1){//一等奖 // var aa = Math.floor(Math.random()*46)+(2160+bTag*1800)+'deg'; // } // if(data.code == 2){//二等奖 // var aa = Math.floor(Math.random()*46)+(2115+bTag*1800)+'deg'; // } // if(data.code == 3){ // var aa = Math.floor(Math.random()*46)+(2070+bTag*1800)+'deg'; // } // if(data.code == 4){ // var aa = Math.floor(Math.random()*46)+(2025+bTag*1800)+'deg'; // } // if(data.code == 5){ // var aa = Math.floor(Math.random()*46)+(1980+bTag*1800)+'deg'; // } // if(data.code == 6){ // var aa = Math.floor(Math.random()*46)+(1935+bTag*1800)+'deg'; // } // if(data.code == 7){ // var aa = Math.floor(Math.random()*46)+(1890+bTag*1800)+'deg'; // } // if(data.code == 8){ // var aa = Math.floor(Math.random()*46)+(1800+bTag*1800)+'deg'; // } // } // } // }) bTag++; var cc = "rotate("+aa+")"; console.log(cc); $("#rotate").css({'transform':cc}) }) }) </script> </body> </html>