A CodePen by esjay. Borderlands 2 Slot Machine Simulator - My friends and I love Borderlands. We wanted to recreate the experience of playing slots in Borderlands 2... for science!

index.html

  <div class="content clearfix">
    <button id="lever">Pull!</button>
    <div class="overlay"></div>
    <div class="stage">
      <ol class="slots spinning" id="first">
        <li class="slot-eridiumx3"></li>
        <li class="slot-seven"></li>
        <li class="slot-leg"></li>
        <li class="slot-psycho"></li>
        <li class="slot-bell"></li>
        <li class="slot-vault"></li>
        <li class="slot-marcus"></li>
        <li class="slot-cherries"></li>
        <li class="slot-eridiumx1"></li>
        <li class="slot-eridiumx2"></li>
      </ol>
      <ol class="slots spinning" id="second">
        <li class="slot-eridiumx3"></li>
        <li class="slot-seven"></li>
        <li class="slot-leg"></li>
        <li class="slot-psycho"></li>
        <li class="slot-bell"></li>
        <li class="slot-vault"></li>
        <li class="slot-marcus"></li>
        <li class="slot-cherries"></li>
        <li class="slot-eridiumx1"></li>
        <li class="slot-eridiumx2"></li>
      </ol>
      <ol class="slots spinning" id="third">
        <li class="slot-eridiumx3"></li>
        <li class="slot-seven"></li>
        <li class="slot-leg"></li>
        <li class="slot-psycho"></li>
        <li class="slot-bell"></li>
        <li class="slot-vault"></li>
        <li class="slot-marcus"></li>
        <li class="slot-cherries"></li>
        <li class="slot-eridiumx1"></li>
        <li class="slot-eridiumx2"></li>
      </ol>
    </div>
  </div>
  <form id="results_form" name="results_form">
    <table id="results">
      <thead>
        <tr>
          <th></th>
          <th>1st</th>
          <th>2nd</th>
          <th>3rd</th>
        </tr>
      </thead>
      <tbody><tr>
        <th>Cherries</th>
        <td>
          <input name="sa" type="radio" class="slot-choice slot-cherries" value="cherries">
        </td>
        <td>
          <input name="sb" type="radio" class="slot-choice slot-cherries" value="cherries">
        </td>
        <td>
          <input name="sc" type="radio" class="slot-choice slot-cherries" value="cherries">
        </td>
      </tr>
      <tr>
        <th>Marcus</th>
        <td>
          <input name="sa" type="radio" value="marcus">
        </td>
        <td>
          <input name="sb" type="radio" value="marcus">
        </td>
        <td>
          <input name="sc" type="radio" value="marcus">
        </td>
      </tr>
      <tr>
        <th>Bell</th>
        <td>
          <input name="sa" type="radio" value="bell">
        </td>
        <td>
          <input name="sb" type="radio" value="bell">
        </td>
        <td>
          <input name="sc" type="radio" value="bell">
        </td>
      </tr>
      <tr>
        <th>Vault</th>
        <td>
          <input name="sa" type="radio" value="vault">
        </td>
        <td>
          <input name="sb" type="radio" value="vault">
        </td>
        <td>
          <input name="sc" type="radio" value="vault">
        </td>
      </tr>
      <tr>
        <th>Psycho</th>
        <td>
          <input name="sa" type="radio" value="psycho">
        </td>
        <td>
          <input name="sb" type="radio" value="psycho">
        </td>
        <td>
          <input name="sc" type="radio" value="psycho">
        </td>
      </tr>
      <tr>
        <th>Leg</th>
        <td>
          <input name="sa" type="radio" value="leg">
        </td>
        <td>
          <input name="sb" type="radio" value="leg">
        </td>
        <td>
          <input name="sc" type="radio" value="leg">
        </td>
      </tr>
      <tr>
        <th>Seven</th>
        <td>
          <input name="sa" type="radio" value="seven">
        </td>
        <td>
          <input name="sb" type="radio" value="seven">
        </td>
        <td>
          <input name="sc" type="radio" value="seven">
        </td>
      </tr>
      <tr>
        <th>Eridium x3</th>
        <td>
          <input name="sa" type="radio" value="eridiumx3">
        </td>
        <td>
          <input name="sb" type="radio" value="eridiumx3">
        </td>
        <td>
          <input name="sc" type="radio" value="eridiumx3">
        </td>
      </tr>
      <tr>
        <th>Eridium x2</th>
        <td>
          <input name="sa" type="radio" value="eridiumx2">
        </td>
        <td>
          <input name="sb" type="radio" value="eridiumx2">
        </td>
        <td>
          <input name="sc" type="radio" value="eridiumx2">
        </td>
      </tr>
      <tr>
        <th>Eridium x1</th>
        <td>
          <input name="sa" type="radio" value="eridiumx1">
        </td>
        <td>
          <input name="sb" type="radio" value="eridiumx1">
        </td>
        <td>
          <input name="sc" type="radio" value="eridiumx1">
        </td>
      </tr>
    </tbody></table>
  </form>

script.js

slots =
[
  {
    "text": "3x Eridium",
    "class": "eridium3",
    "id":  0
  },
  {
    "text": "Seven",
    "class": "seven",
    "id":  1
  },
  {
    "text": "Leg",
    "class": "leg",
    "id":  2
  },
  {
    "text": "Psycho",
    "class": "psycho",
    "id":  3
  },
  {
    "text": "Vault",
    "class": "vault",
    "id":  4
  },
  {
    "text": "Bell",
    "class": "bell",
    "id": 5
  },
  {
    "text": "Marcus",
    "class": "marcus",
    "id":  6
  },
  {
    "text": "Cherries",
    "class": "cherries",
    "id": 7
  },
  {
    "text": "1x Eridium",
    "class": "eridium1",
    "id":  8
  },
  {
    "text": "2x Eridium",
    "class": "eridium2",
    "id":  9
  }
]

$(document).ready(function() {
  // Handler for .ready() called.
//alert();
   // show initial slots

  $("#lever").on("click", function(){
    // Ease out and spin wheels
//alert();
    // Get final position of wheels
    outcome = get_outcome();

    // Callback when timers complete
    if($("#first").hasClass("spinning")) {
      $("#first").attr("class", "slots "+outcome[0]);
      $("#second").attr("class", "slots "+outcome[1]);
      $("#third").attr("class", "slots "+outcome[2]);

    }
    else
    {
      spin_wheel("#first");
      spin_wheel("#second");
      spin_wheel("#third");
    }
  });

  $('input[name=sa]').on("click", function(x){
    $("#first").attr("class", "slots "+$(this).val());
  });
  $('input[name=sb]').on("click", function(x){
    $("#second").attr("class", "slots "+$(this).val());
  });
  $('input[name=sc]').on("click", function(x){
    $("#third").attr("class", "slots "+$(this).val());
  });

});

function set_rotation(el, position) {
  $("#"+el).attr('class', 'slots slot'+position);
}

function get_outcome() {
  // Choose one of the outcome scenarios based upon probabilities
  var outcomes = new Array();;

  outcomes[0]= "marcus";
  outcomes[1]= "marcus";
  outcomes[2]= "marcus";

//  alert(outcomes[0]);

  return (outcomes);
}

function spin_wheel(el) 
{
  $(el).attr("class", "slots spinning");
//  $(el).attr("class", "slots easing_up").delay(200).queue(function () {$(this).attr("class","slots spinning");$(this).dequeue();});

}

style.scss

@import "compass";
$z_translate: 90px;
$wheel_radius: 55px;
$wheels_height: 200px;
$slot_width: 72px;
$slot_height: 55px;
$slot_margin: 6px;
$slot_machine_width: $slot_width*3 + $slot_margin*12;
$lever_width: 70px;
$slot_machine_container_width: $lever_width + $slot_machine_width;

* {
  box-sizing: border-box;
}

body {
  display: box;
  box-align: center;
  box-pack: center;
//  width: 100%;
//  position: relative;
}

.content {
  width: $slot_machine_container_width;
  margin: 0 33% 0 40%;
  background: #000;
  position: absolute;
  height: 100%;
  display: box;

}
.clearfix::after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}
.stage {
  transform: translateZ(-90px);
  background: #000;
  z-index: 20;
}

.stage, .overlay {
  top: 15%;
  display: box;
  position: absolute;
  left: 0%;
  height: $wheels_height;
  width: $slot_machine_width;
  perspective: 700px;
  perspective-origin: center center;
  overflow: hidden;
  box-align: center center;
}

.overlay {
  @include filter-gradient(#000000, #000000, vertical);
  $experimental-support-for-svg: true;
  @include background-image(linear-gradient(top,  rgba(0,0,0,1) 11%,rgba(124,124,124,1) 12%,rgba(169,169,169,0.15) 22%,rgba(191,191,191,0.19) 27%,rgba(183,183,183,0.2) 28%,rgba(26,26,26,0.25) 34%,rgba(0,0,0,1) 35%,rgba(0,0,0,1) 36%,rgba(0,0,0,0.67) 37%,rgba(18,18,18,0) 39%,rgba(71,71,71,0) 45%,rgba(44,44,44,0) 50%,rgba(0,0,0,0) 51%,rgba(17,17,17,0) 60%,rgba(4,4,4,0) 66%,rgba(2,2,2,1) 67%,rgba(0,0,0,1) 68%,rgba(5,5,5,1) 69%,rgba(10,10,10,0.35) 70%,rgba(43,43,43,0.56) 76%,rgba(28,28,28,0.9) 86%,rgba(0,0,0,1) 89%));



  z-index: 30;

}


#lever {
  display: block;
  background: transparent;
  border: .15em solid rgba(128,128,128,.5);
  color: #fff;
  font-size: 28pt;
  font-weight: bold;
//  box-align: center center;
  width: 80%;
  height: $lever_width;
  box-align: center;
  box-pack: center;
//  text-align: center;
  position: relative;
  left: $slot_machine_width+70px;
  top: 25px;
  transform-origin: 0 0;
  transform: rotate(90deg);
}
#lever:hover {
  border: .15em solid rgba(128,128,128,1);
}

.slots {
  height: $wheel_radius;
  width: 1px;
  list-style-type: none;
  transition: transform 1s;
  position: absolute;
  top: 30%;
  padding: 0;
  transform-style: preserve-3d;
}

#first { left: 8%; }

#second { left: 38%; }

#third { left: 68%; }

.slots li {
  display: box;
  width: 72px;
  height: 55px;
  background: url(https://dl.dropbox.com/u/2128714/BL2-slots/faces_trans2.png) no-repeat top left;
  backface-visibility: hidden;
  position: absolute;
  z-index: 25;
  box-shadow: 0 0 1.5em orange;
  animation: colorize_glow 8s linear infinite;
}

.slots.eridiumx3 {
  transform: rotateX(0deg);
}

.slots.seven {
  transform: rotateX(-36deg);
}

.slots.leg {
  transform: rotateX(-72deg);
}

.slots.psycho {
  transform: rotateX(-108deg);
}

.slots.bell {
  transform: rotateX(-144deg);
}

.slots.vault {
  transform: rotateX(-180deg);
}

.slots.marcus {
  transform: rotateX(-216deg);
}

.slots.cherries {
  transform: rotateX(-252deg);
}

.slots.eridiumx1 {
  transform: rotateX(-288deg);
}

.slots.eridiumx2 {
  transform: rotateX(-324deg);
}

.slots li:nth-child(1) {
  transform: rotateX(0deg) translateZ($z_translate);
}

.slots li:nth-child(2) {
  transform: rotateX(36deg) translateZ($z_translate);
}

.slots li:nth-child(3) {
  transform: rotateX(72deg) translateZ($z_translate);
}

.slots li:nth-child(4) {
  transform: rotateX(108deg) translateZ($z_translate);
}

.slots li:nth-child(5) {
  transform: rotateX(144deg) translateZ($z_translate);
}

.slots li:nth-child(6) {
  transform: rotateX(180deg) translateZ($z_translate);
}

.slots li:nth-child(7) {
  transform: rotateX(216deg) translateZ($z_translate);
}

.slots li:nth-child(8) {
  transform: rotateX(252deg) translateZ($z_translate);
}

.slots li:nth-child(9) {
  transform: rotateX(288deg) translateZ($z_translate);
}

.slots li:nth-child(10) {
  transform: rotateX(324deg) translateZ($z_translate);
}


.slot-eridiumx3 {
  background-position: 0 -2px!important;
}

.slot-seven {
  background-position: 0 -58px!important;
}

.slot-leg {
  background-position: 0 -111px!important;
}

.slot-psycho {
  background-position: 0 -163px!important;
}

.slot-vault {
  background-position: 0 -219px!important;
}

.slot-bell {
  background-position: 0 -275px!important;
}

.slot-marcus {
  background-position: 0 -331px!important;
}

.slot-cherries {
  background-position: 0 -384px!important;
}

.slot-eridiumx1 {
  background-position: 0 -438px!important;
}

.slot-eridiumx2 {
  background-position: 0 -494px!important;
}

@keyframes spin_slots {
  0% {
    transform: rotateX(0deg);
  }

  50% {
    transform: rotateX(-180deg);
  }

  100% {
    transform: rotateX(-359deg);
  }
}

@keyframes colorize_glow {
  0% { 
    background-color: #ff0d05; 
    box-shadow: 0 0 1.5em #ff0d05, 0 0 1.7em #ff0d05;
  }
  25% { 
    background-color: #daff05; 
    box-shadow: 0 0 1.5em #daff05, 0 0 1.7em #daff05;
  }
  50% {
    
    background-color: #05ff48; 
    box-shadow: 0 0 1.5em #05ff48, 0 0 1.5em #05ff48;
  }
  75% {
    background-color: #fa4bf4; 
    box-shadow: 0 0 1.5em #fa4bf4, 0 0 1.5em #fa4bf4;
  }
  90% {
    background-color: #8f05ff; 
    box-shadow: 0 0 1.5em #8f05ff, 0 0 1.5em #8f05ff;
  }
  100% { 
    background-color: #ff0d05; 
    box-shadow: 0 0 1.5em #ff0d05, 0 0 1.5em #ff0d05;
  }
}

.slots.easing_up {
  transition: transform 400ms;
  animation: spin_slots 530ms cubic-bezier(1, -0.53, 0.405) 1;
}

.slots {
  transition: animation 400ms, transform 400ms cubic-bezier(1, -0.53, 0.405);

}
.slots.spinning#first {
  animation: spin_slots 2030ms linear infinite;
}

.slots.spinning#second {
  animation: spin_slots 1630ms linear infinite;
}

.slots.spinning#third {
  animation: spin_slots 1230ms linear infinite;
}

#results {
  position: absolute;
  left: 13%;
  top: 2em;
  display: box;
  width: 20%;
}

#results th {
  background: lightgrey;
}

#results td {
  width: 30px;
  height: 30px;
}

#results * {
  border: 1px solid black;
}

#results input[type=radio] {
  width: 99%;
  height: 99%;
      //position:absolute;
    /* Match the image dimensions */

    /* Reset anything that could peek out or interfere with dimensions */
    overflow:hidden;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    opacity:1;

}

#results input[type=radio]:before {
  width: 99%;
  height: 99%;
  border: 1px solid red;
  background: pink;
  cursor: pointer;
  position: absolute;
}

.slot-choice {
  opacity: .5;
}