如何使用CSS3 & jQuery实现老虎机旋转效果？
如何使用CSS3 & jQuery实现老虎机旋转效果？
提问于 2011-09-19 11:03:35
我正在创建一个演示应用程序，当单击一个按钮时，它会随机选择一个地点。一旦按钮被点击，我希望在选择场地之前，使用CSS3和jQuery通过老虎机旋转动画滚动场地。
我想过使用-webkit-keyframes和改变背景位置，但这不是我想要的理想动画。
@-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;
}有没有人能提供一些关于如何实现这一点的见解?到目前为止，我只有Here。任何帮助都是非常感谢的。
谢谢
回答 2
Stack Overflow用户
发布于 2011-09-25 01:21:37
使用http://odhyan.com/slot/插件的http://odhyan.com/slot/怎么样？
我不确定你的旋转关键帧方法是否会产生想要的效果。老虎机的显示屏是旋转的，但由于它的直径很大，所以看起来更像是一个连续的滚动。你需要扭曲图像的顶部和底部，以使它们看起来逼真。
如果模糊顶部和底部(透明gif或css3缩进阴影)，可能会接近所需的效果。查看video of a real slot machine
Stack Overflow用户
发布于 2011-09-25 09:25:18
在我看来，javascript + trigonometry是你最好的选择。看看这个dynamic carousel，然后切换坐标轴，我想这就是你想要的效果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7466070
复制相关文章
相似问题