CSS3 Slot Machine

slots.coffee

$ ->
  result = []
  count  = 0

  # Loop through each reel
  $('.reel-outer'). each ->
    $this    = $(this)
    index    = $this.index()
    spinPlus = 0

    # When the spin link is clicked...
    $('.spin').click ->

      # Choose a random symbol between 1 and 10         
      type     = parseInt((Math.random() * 9), 10) + 1

      # Define a spin duration between 1 and 10000
      duration = parseInt((Math.random() * 10000), 10)

      # Increment the total spin value
      spinPlus += 3600

      # Multiply type by 36 (degrees) and add to the total
      spin     = type * 36 + spinPlus

      # Apply the transition duration and rotation
      $this.find('.reel').css
        WebkitTransitionDuration: "#{ duration }ms"
        WebkitTransform: "rotateX(-#{ spin }deg)"

      # Add the reel result type to array
      result.push(type)

      # Increment the spin counter
      count++

      # Once the counter reaches 3...
      if count is 3

        # And all transitions are ended, display results
        $this.on "webkitTransitionEnd transitionend", () ->
          console.log result

        count  = 0
        result = []

slots.haml

#slots
  - symbols = ["users", "location", "help", "buildings", "user", "femaleuser", "briefcase", "globe", "chat", "phone"]
  - 3.times do |i|
    .reel-outer
      .reel
        .reel-inner
          .reel-faces
            - 10.times do |i|
              .reel-face-outer
                .reel-face
                  %div{:class => "ss-#{ symbols[i] }"}
%a.spin(href="#") SPIN

slots.sass

#slots
  +inline-block()
  margin: 20px 0
  height: 160px
  +perspective(0px)
  position: relative
  width: 280px

  * 
    +backface-visibility(hidden)
    +transform-style(preserve-3d)

  .reel-outer, .reel, .reel-faces, .reel-face-outer, .shadow
    position: absolute

  .reel-outer
    +background-image(linear-gradient($grey, $white 40%, $white 60%, $grey))
    border: 1px solid #CCC
    +box-shadow(inset 0 0 20px 0 #CCC)
    +box-sizing(border-box)
    height: 100%
    width: 80px

    &:nth-child(2)
      left: 100px
    &:nth-child(3)
      left: 200px

  .reel
    height: 160px
    +transition(all)
    +transition-timing-function(cubic-bezier(0.57, -0.03, 0.57, 1.1))
    width: 80px

  .reel-face-outer
    height: 80px
    +transform-origin(0, 100%)
    width: 80px

    $i: 0

    @while $i < 10
      &:nth-child(#{ $i + 1 })
        +rotateX(#{ $i * 36 }deg)
      $i: $i + 1

  .reel-face
    height: 50px
    line-height: 50px
    +rotateX(72deg)
    +transform-origin(0, 0)    
    width: 80px