fortune clockwise and path anticlockwise

by Abhay Singh

HTML

<div class="wheelsection">
            <div class="wheelouter">             
           <div class="wheelinnershadow">
               <div id="wheelouter"></div>
               
          <ul data-rotation="0" id="wheel">
           <li>
                <div class="text">1</div>          
            </li><li>
                <div class="text">2</div>          
            </li><li>
                <div class="text">3</div>          
            </li><li>
                <div class="text">4</div>          
            </li><li>
                <div class="text">5</div>          
            </li><li>
                <div class="text">6</div>          
            </li><li>
                <div class="text">7</div>          
            </li><li>
                <div class="text">8</div>          
            </li>
         </ul>
         </div> 
         </div>
         
        <div class="buttons">
            <button id="play">Spin</button><br><br><br>
            <button class="hide" id="spin">stop</button>
        </div>
        
        </div>

CSS

.ios ion-content .scroll-content{
        padding-top: 20px !important;
    }

    ion-content {
    background: url(../assets/images/background.jpg) !important; 
    background-size: cover !important;
    }
    ion-icon[name="menu"] {
    font-size: 33px;
    }
    ion-content .scroll-content {
        padding-top: 0 !important;
    }
    
    .center {
        text-align: center;  
    }
    $centerMargin: 0px auto;
    $wheelWidth : 187px;
    $wheelHeight:187px;
    .ionic-logo {
      display: inline-flex;
      position:relative;
      width:87px;
      height:87px;
      border:3.5px solid #5E86C4;
      border-radius:100%;
      -moz-border-radius:100%;
      -webkit-border-radius:100%;
      -moz-animation: spin 2s infinite linear;
      -webkit-animation: spin 2s infinite linear;
    }

    .ionic-logo:after {
      content:'';
      position:absolute;
      width:38px;
      height:38px;
      background: #5E86C4;
      top:50%;
      left:50%;
      margin-left:-19px;
      margin-top:-19px;
      border-radius:100%;
      -moz-border-radius:100%;
      -webkit-border-radius:100%;
      }

    .ionic-logo:before {
      content:'';
      background: #5E86C4;
      width:14px;
      height:14px;
      position:absolute;
      top:-8px;
      left:50%;
      margin-left:-7px;
      border-radius:100%;
      -moz-border-radius:100%;
      -webkit-border-radius:100%;
    }
    #wheel {
	position: absolute;
	padding: 0;
    margin: 0 auto;
	width:187px;
    height: 187px;
	border-radius: 50%;
	list-style: none;
    overflow: hidden;    
    left: -2px;
    right: 0;
    top: 27px;   
}
li {
	overflow: hidden;
	position: absolute;
	top: 0; right: 0;
	width: 50%; height: 50%;
	transform-origin: 0% 100%;    
  border:1px solid #f00;
}
.text {
	position: absolute;
	left: -100%;
	width: 200%; height: 200%;
	text-align: center;
    -webkit-transform: skewY(60deg) rotate(15deg);
    -ms-transform: skewY(60deg) rotate(15deg);
    transform: skewY(45deg)...

JavaScript

function rand(min, max) {
            return Math.random() * (max - min) + min;
        }
        var color = ['#fbc', '#f88', '#fbc', '#f88', '#fbc', '#f88', "#fbc", "#f67"];
        var label = ['1%', '2', '3%', '4', '5%', '6%', '7%', '8%'];
        var slices = color.length;
        var sliceDeg = 360 / slices;
        var deg = rand(0, 360);
        var speed = 0;
        var slowDownRand = 0;
        var width = wheel.width; // size
       // var center = width / 2;      // center
        var isStopped = false;
        var lock = false;
        //var drawSlice = '8';
    
        function deg2rad(deg) {
            return deg * Math.PI / 180;
        }
        document.getElementById("spin").addEventListener("mousedown", function () {
            isStopped = true;          

        }, false);
        var style = document.createElement('style');        
        style.type = 'text/css';            
        var keyFrames = '\
        @-webkit-keyframes spinIt {\
            100% {\
                -webkit-transform: rotate(deg);\
            }\
        }\
        @-moz-keyframes spinIt {\
            100% {\
                -webkit-transform: rotate(deg);\
            }\
        }';
        style.innerHTML = keyFrames.replace(/deg/g, "180deg");
        style.innerHTML = style.innerHTML + ".rotation {animation: spinIt .2s infinite linear;}";    
        document.getElementsByTagName('head')[0].appendChild(style);
        document.getElementById("play").addEventListener("mousedown", function () {
            document.getElementById('spin').className='show';
            (function anim() {
                //debugger;
                var wheelingg = document.getElementById('wheel');
                deg += speed ;
                deg %= 360;
                // Increment speed
                if (!isStopped && speed < 3) {
                    speed = speed + 1 * 12;
                }
                // Decrement Speed
                if (isStopped) {

               ...