Using Css3+jquery.js to realize micro-letter lottery Turntable effect

Why not use CSS3 to achieve it? So I'm going to use CSS3 to achieve this effect. No need to rely on jquery animation effect plug-ins, rotation angle plug-ins.

No nonsense paste Source:

PS: This animation does not support IE10 and the following (11 is not tested should also not support, want full compatibility access to the jquery version-see the first line of the connection), other browser test available. UC, micro-core test is available.

(The demo accessory is below, need wamp environment.) ）



The most basic structure of the <!---->
<div class= "Demo" >


</div>

/* css*/
. done{
-webkit-transition:2s Ease, which is responsible for animation effects;
-moz-transition:2s ease;
-o-transition:2s ease;
Transition:2s ease;
}

$ (function () {     $ ("#startbtn"). Click (function () {         Lottery ()                 
     //Click Execute function Ajax    }); 
}); var a = 0;                            //Declare a value a function lottery () {    $. Ajax ({        type: "POST",         URL: " Json.php ",         dataType:" JSON ",         Cache:false,         error:function () {             alert ("Made a mistake!") 
"); 
            return false;        },         success:function (JSON) {                     // Angle   B = php from the angle of +720 (in order to ensure that the animation is not too fast to stop the first two laps) + declared value a            
  var b = json.angle+720+a;            //Awards       
      var p = json.prize;            //Click to run animation, so you must dynamically load style two values to be compatible with Chrome & Firefox & Safair             document.getElementById (" Startbtn "). setattribute (" style ","-webkit-transform:rotate "(" +b+ "deg); Transform:rotate (" +b+ "deg))             //After each execution through a so that the next 3 times more turn             //Because the value of rotate () is saved in CSS3 after each animation, if the angle is not increased, it will rotate in the angle of the return of PHP, that is, rotate within 360 degrees       
      A + + 1080;            //Animation effect is 2S, the animation plays the effect of playing the window    
         settimeout (slidefunction,2000);             function Slidefunction () {                 var con = confirm ("Congratulations, +p+") do you want to do it again? 
");                 if (con) {                     Lottery ( 
);                }else{                     return false;                }             }        }    
}); }

Because is self-study JS, write is not concise. Just to realize the effect of the idea. Excuse me!

Download Address: http://pan.baidu.com/s/1ntiCaKx