Skip to content

Instantly share code, notes, and snippets.

@leemartin
Last active June 23, 2020 13:05
Show Gist options
  • Save leemartin/4595985 to your computer and use it in GitHub Desktop.
Save leemartin/4595985 to your computer and use it in GitHub Desktop.
CSS3 Slot Machine
$ ->
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
- 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
+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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment