JSFiddle - React, Tailwind, and code Playground

by Daan Hai

HTML

<img src="http://i.imgur.com/jCinM5q.png" class="wheel">
<img src="http://i.imgur.com/9XDyEu4.png" class="arrow">
<input type="submit" value="Spin the wheel!" class="spinbutton">

CSS

body {
    padding: 0;
    margin: 0;
}

.wheel {
    transition: all 5s cubic-bezier(1, -0.21, 0, 0.99);
    width: 250px;
}

.arrow {
    position: fixed;
    top: 0;
    left: 0;
}

.rotate {
/*    -ms-transform: rotate(3600deg);
    -webkit-transform: rotate(3600deg);
    transform: rotate(3600deg); */

}

JavaScript

$('.spinbutton').click(function(){
     $('.wheel').css({
        "-webkit-transform": "rotate(0deg)",
        "-moz-transform": "rotate(0deg)",
        "transform": "rotate(0deg)"
    });
    
    
    var randomInt = Math.floor(Math.random() * 180000) + 1800  ;
    var random = "rotate(" + randomInt + "deg)";
    $('.wheel').css({
        "-webkit-transform": random,
        "-moz-transform": random,
        "transform": random
    });
});