slot-machine-gen/dist/slot-machine.css

Create an extremely biased, web-based slot machine game.

/**
 *  Slot Machine Generator
 *  Create an extremely biased, web-based slot machine game.
 *
 *  Copyright 2020-202s54, Marc S. Brooks (https://mbrooks.info)
 *  Licensed under the MIT license:
 *  http://www.opensource.org/licenses/mit-license.php
 */
.slot-machine {
  height: 480px;
  width: 600px;
}
.slot-machine .display {
  display: flex;
  height: inherit;
  position: absolute;
  transform: translateZ(0);
  width: inherit;
  z-index: 2;
}
.slot-machine .display .reel {
  background: transparent;
  border: 1px solid #999;
  border-radius: 10px;
  height: calc(100% - 103px);
  margin: 47px 10px;
  overflow: hidden;
  width: 200px;
}
.slot-machine .display .reel:after {
  box-shadow: inset -3em -3em 4em #0C090A;
}
.slot-machine .display .reel:before {
  box-shadow: inset -3em 3em 4em #0C090A;
}
.slot-machine .display .reel:after, .slot-machine .display .reel:before {
  content: "";
  display: block;
  height: 50%;
  width: calc(100% + 100px);
}
.slot-machine .slots {
  height: inherit;
  z-index: 1;
  --webkit-transform: translate3d(0, 0, 0);
}
.slot-machine .slots .reel {
  display: inline-block;
  height: inherit;
}
.slot-machine .slots .reel .strip {
  list-style: none;
  margin-left: -40px;
  transform-style: preserve-3d;
}
.slot-machine .slots .reel .strip.start {
  animation: init 300ms ease-in reverse;
}
.slot-machine .slots .reel .strip.spin {
  animation: spin 600ms linear infinite reverse;
}
.slot-machine .slots .reel .strip.stop {
  animation: init 1000ms ease-out reverse;
}
.slot-machine .slots .reel .strip li {
  font-size: 0;
  position: absolute;
  text-align: center;
  -webkit-backface-visibility: hidden;
}
@-moz-keyframes init {
  from {
    -moz-transform: rotateX(0);
  }
  to {
    -moz-transform: rotateX(15deg);
  }
}
@-webkit-keyframes init {
  from {
    -webkit-transform: rotateX(0);
  }
  to {
    -webkit-transform: rotateX(15deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotateX(0);
  }
  to {
    -moz-transform: rotateX(360deg);
  }
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotateX(0);
  }
  to {
    -webkit-transform: rotateX(360deg);
  }
}

/*# sourceMappingURL=slot-machine.css.map */