Slot Machine CSS Animation

Observations of the digital slot machines show two style spinning wheels. The first or classic style (above) incorporates the rotation of the entire wheel. In a three wheel slot, each of the three individual wheels rotate, resembling the classic slot machine wheels.

The second is only seen with a few digital slot manufacturers and involves the rotation of each image window. In a common five wheel slot each of the 20 individual image windows rotate separately. This style can be seen in the Slot Machine 2
CSS animation.

Both slot machine animations are accomplished using CSS3 animation. Java script is only used to restart the spinning function, as CSS is unable to “on click” restart animation at this time of development.