我怎样才能实现与CSS3和放老虎机，纺纱效果; jQuery的？ [英] How can I achieve a slot machine spinning effect with CSS3 & jQuery?

问题描述

我创建一个演示应用程序点击一个按钮时随机选择的场所。一旦按钮被点击我想有场地有老虎机旋转的动画使用CSS3和jQuery选择了场地之前滚动。

I am creating a demo application that randomly selects a venue when a button is clicked. Once the button is clicked I want to have the venues scroll through with a slot machine spinning animation using CSS3 and jQuery before a venue is selected.

我想过使用 -webkit-关键帧更改背景的位置，但它不是理想的动画，我想。

I thought about using -webkit-keyframes and changing the background position, but it's not the ideal animation I would like.

@-webkit-keyframes spin{  
  0% {  
        background-position: 0, 0 0;
        -webkit-transform: rotateX(0deg);
     }
  100% { 
        background-position: 0, 0 -640px;
        -webkit-transform: rotateX(360deg);
     }
}

.rotating{
    -webkit-animation: spin .5s infinite linear;
    -webkit-transition: background-position .7s;
}

任何人都可以就如何可以做到这一点任何见解？ 这里是我迄今。任何帮助是AP preciated。

Can anyone give any insight on how this can be achieved? Here is what I have so far. Any help is appreciated.

感谢您

推荐答案

多<击>经过研究剽窃我来到了这一点。希望这有助于一些形状或形式。

After much research plagiarising I've come up with this. Hopefully it helps in some shape or form.

http://jsfiddle.net/DnTX6/

这篇关于我怎样才能实现与CSS3和放老虎机，纺纱效果; jQuery的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！