使用HTML5，CSS3和Jquery的老虎机效果

这一切始于我最初想制作老虎机视频游戏时，还有其他一些想法可以尝试。 这是一个代码和信息集合，可用于创建各种老虎机效果。 通常，这种想法是使用HTML5，CSS3和/或JQuery提供不同的效果来产生旋转的车轮和其他一些效果。

在尝试使动画正确显示时，经常会出现问题。 这并不总是像任何人最初想的那样简单。 特别是对于使用这些工具的初学者而言。 直到最近我才开始使用HTML5，CSS3和JQuery。 希望这将减少其他人的搜索时间。

带有老虎机效果的横幅

我做了一个横幅，我需要一种很好的方法在其上制作动画老虎机效果。 带有2D动画，这很简单。 尝试通过3D转换进行操作可能是一场灾难。 再说一次，在使用WebKit的某些浏览器中，我会遇到兼容性问题。 要修复它，我必须使用JQuery和JQ Transform库，这是我开始的代码：

<div class="select-a-game ">
    <ul class="select-a-game-name text-center">
      <li class="sagn-dark-blue">S</li>
      <li class="sagn-dark-grey">E</li>
      <li class="sagn-orange">L</li>
      <li class="sagn-red">E</li>
      <li class="sagn-grey">C</li>
      <li class="sagn-dark-blue">T</li>
      <li class="sagn-black">A</li>
      <li class="sagn-dark-grey">G</li>
      <li class="sagn-dark-blue">A</li>
      <li class="sagn-grey">M</li>
      <li class="sagn-red">E</li>
    </ul>
  </div>

最终涉及到在我的<li>元素中使用了overflow：hidden样式。 然后，我必须将每个字母包装在<div>中。 最后，我必须为<div>的top属性的内部设置动画，使其垂直移动。 当该top属性达到某个数字时，我必须将其位置重置为负数。 文本必须已经通过<li>的底部。 一旦将位置设置为负数，它将排在最前面，因此我编写了以下代码，而不是所有代码：

$('li').click(function(event){
     
$( event.target ).css({ perspective: 200, rotateY: 240 });
}); 

JS函数是这一切的重要部分。 这只是我能想到的最简单的实现。 当然，这只是任何人根据需要进行修改的示例。 该函数在单击时被调用，因此它不会立即起飞。 选择场地老虎机样式

我制作了一个应用程序，当用户单击按钮时，该应用程