Category Hierarchy

function roll() {
  var randomNum = Number((Math.random() * 100).toFixed(2));
  var firstDigit = Number(Math.floor((randomNum) / 10 - 5));
  var win = firstDigit;
  if (win > 4) {
    var rollm = win * 40 - 40 * 15;
    document.getElementById("roll").style = "margin-top: " + rollm + "px ";
  }
  if (win < 4) {
    var rollm = 180 - 40 * win - 380;
    document.getElementById("roll").style = "margin-top: " + rollm + "px ";
  }
  if (win == 4) {
    var rollm = 360;
    document.getElementById("roll").style = "margin-top: -" + rollm + "px ";
  }
}

body {
  color: #fff;
}
#roll {
  transition: .5s ease;
}
.ticker {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 15px 0px 15px 26px;
  border-color: transparent #fff transparent;
  margin: 0 -20px;
  transform: translateY(-75px);
}
#roll {
  width: 40px;
  height: 360px;
  background: #0077ee;
  margin: 0 auto;
}
.roll-h {
  width: 40px;
  height: 120px;
  margin: 0 auto;
  overflow: hidden;
}
.shadow {
  height: 40px;
  margin: 0 auto;
  transform: translateY(40px);
}
.black,
.his-h {
  width: 40px;
  height: 40px;
  font-size: 20px;
  line-height: 40px;
  font-weight: 700;
  text-align: center;
  float: left;
}
.black {
  background: black;
}
.floatleft {
  float: left;
}

<div style="margin:0 auto; display:inline-block">
  <div class="shadow"></div>
  <div class="roll-h">
    <div id="roll">
      <div class="black">9</div>
      <div class="black">0</div>
      <div class="black">1</div>
      <div class="black">2</div>
      <div class="black">3</div>
      <div class="black">4</div>
      <div class="black">5</div>
      <div class="black">6</div>
      <div class="black">7</div>
      <div class="black">8</div>
      <div class="black">9</div>
      <div class="black">0</div>
    </div>
  </div>
  <div class="ticker"></div>
</div>
<button onClick="roll()" id="spin">Spin</button>