.draw-out{width:400px;height:400px;margin:30px auto;position:relative}
	  .draw-bottom{width:400px;height:400px;position:relative}
	  .draw-bottom section{width:400px;height:1px;background:#d6d6d6;position:absolute;top:200px;left:0}
	  .draw-bottom section.s2{
	  transform:rotateZ(60deg);
	  -webkit-transform:rotateZ(60deg);
	  -moz-transform:rotateZ(60deg);
	  -o-transform:rotateZ(60deg);
	  }
	  .draw-bottom section.s3{
	  transform:rotateZ(120deg);
	  -webkit-transform:rotateZ(120deg);
	  -moz-transform:rotateZ(120deg);
	  -o-transform:rotateZ(120deg);
	  }
	  .draw-bottom p{position:absolute;}
	  .draw-bottom p.p1{top:105px;left:300px}
	  .draw-bottom p.p2{top:240px;left:300px}
	  .draw-bottom p.p3{top:310px;left:170px}
	  .draw-bottom p.p4{top:240px;left:60px}
	  .draw-bottom p.p5{top:105px;left:60px}
	  .draw-bottom p.p6{top:30px;left:170px}
	 
	  .draw{width:400px;height:400px;border:2px solid #E17F27;border-radius:200px;position:absolute;top:0}
	  .draw-in{width:80px;height:80px;padding:1px;margin:157px 157px}
	  .draw-in div{background:#E17F27;width:40px;height:40px;border-radius:33px;position:relative;margin:20px 20px}
	  .draw-in div .circle{display:block;width:0;height:0;border:10px solid transparent;border-bottom:40px solid #E17F27;position:absolute;left:10px;top:-44px}
	  .btn{display:block;margin:100px auto;width:100px;height:30px;border-radius:6px;background:#0ABF5D;color:#fff;text-align:center;line-height:30px;text-decoration:none}
	  .result p{color:#c00}
 

html程式碼：

<div class="draw-out">
	   <div class="draw-bottom">
		   <section class="s1"></section>
		   <section class="s2"></section>
		   <section class="s3"></section>
		   <p class="p1">一等獎</p>
		   <p class="p2">二等獎</p>
		   <p class="p3">三等獎</p>
		   <p class="p4">四等獎</p>
		   <p class="p5">五等獎</p>
		   <p class="p6">六等獎</p>
	   </div>
	   <div class="draw">
	     <div class="draw-in">
		   <div><em class="circle"></em></div>
		 </div>
	   </div>
	</div>
	<a href="javascript:void(0)" class="btn">來一下</a>
	<div class="result"></div>
 

js程式碼：

<script type="text/javascript" src="/static/lib/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="script/jquery.rotate.min.js"></script>
	<script type="text/javascript">
	   $(function(){
	    var orignal_deg=-30;
		var last_deg=0;
	     $('.btn').on('click',function(){
		
			$.post('result.php',function(res){
			  var response=JSON.parse(res);		  
			  var rand=Math.ceil(Math.random()*10);
			  //$rand_deg隨機度數 只能在6-54
			  if(rand==10){
				  var $rand_deg=9*6;
			  }else{
				  var $rand_deg=rand*6;
			  }

			  var $curr_deg=360-(60*(response.status+1))+$rand_deg;
			  var deg=orignal_deg+4*360-last_deg+$curr_deg;
			  
			   $('.draw-bottom').rotate({
				  duration: 4000,
				  angle:orignal_deg, 
				  animateTo:deg,
				  callback: rotation_res
			   });
   
			   function rotation_res(){
			      $('.result').append('<p>'+response.msg+'</p>');
				  console.log('您轉了'+$curr_deg+'度！');
				  orignal_deg=deg;
				  last_deg=$curr_deg;
			   };
			   
			});
		 });
	   });
	</script>
 

demo示例：test.ixiewei.com/luck-draw/index3.php