做到一個活動，需要轉盤抽獎，於是想到使用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>