做到一个活动，需要转盘抽奖，于是想到使用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>