JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="game">
  {{ currentPrize }}
  <ul class="wheel" :style="wheelStyle">
    <li v-for="prize in prizes" v-text="prize"></li>
  </ul>
  
  <button @click="spin">spin me</button>
</div>

SCSS

.game {
  perspective: 1000px;
}

@keyframes wheelspin {
  0% {
    transform: rotateX(55deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(55deg) rotateZ(360deg);
  }
}

.wheel {
  margin: 0 auto;
  list-style: none;
  padding: 0;
  font-size: 10vmin;
  width: 10em;
  height: 10em;
  background: lightblue;
  position: relative;
  border-radius: 10em;
  overflow: hidden;
  transform: rotateX(55deg);
  transition: transform 4s ease-out;
  
  li {
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 21.14%;
    width: 50%;
    height: 57.72%;
    line-height: 7.696; // 5.772
    font-size: .75em;
    padding-left: .5em;
    transform-origin: 100% 50%;
  }
  
  li:nth-child(1) {
    background-color: red;
    transform: rotateZ(0deg);
  }
  
  li:nth-child(2) {
    background-color: orange;
    transform: rotateZ(60deg);
  }
  li:nth-child(3) {
    background-color: yellow;
    transform: rotateZ(120deg);
  }
  li:nth-child(4) {
    background-color: green;
    transform: rotateZ(180deg);
  }
  li:nth-child(5) {
    background-color: blue;
    transform: rotateZ(240deg);
  }
  li:nth-child(6) {
    background-color: purple;
    transform: rotateZ(300deg);
  }
}

JavaScript

new Vue({
	el: '.game',
  
  data: {
  	rotation: 0,
    prizes: [
    	'Hoodie',
      'Grand Prize',
      'Speaker',
      'Headphones',
      'Notebook',
      'Runner Up'
    ]
  },
  
  computed: {
  	wheelStyle() {
    	return `transform: rotateX(55deg) rotateZ(-${this.rotation}deg);`;
    },
    
    currentPrize() {
    	return this.prizes[
      	Math.floor((this.rotation % 360) / 60)
      ];
    },
  },
  
  methods: {
  	spin() {
    	let spin = Math.floor(Math.random() * 1080) + 1080;
      this.rotation += spin;
    }
  }
})