如何使用CSS3和jQuery实现老虎机旋转效果？

Question

我正在创建一个演示应用程序，在单击按钮时随机选择一个场地。 单击按钮后，我希望在选择场地之前使用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;
}

任何人都可以提供有关如何实现这一目标的任何见解？ 这是我到目前为止所拥有的。 任何帮助表示赞赏。

谢谢

Answer 1

经过大量 研究 抄袭后，我想出了这个。 希望它有助于某种形状或形式。

 const POSTERS_PER_ROW = 12; const RING_RADIUS = 200; function setup_posters(row) { var posterAngle = 360 / POSTERS_PER_ROW; for (var i = 0; i < POSTERS_PER_ROW; i++) { var poster = document.createElement('div'); poster.className = 'poster'; // compute and assign the transform for this poster var transform = 'rotateY(' + (posterAngle * i) + 'deg) translateZ(' + RING_RADIUS + 'px)'; poster.style.webkitTransform = transform; // setup the number to show inside the poster var content = poster.appendChild(document.createElement('p')); content.textContent = i; // add the poster to the row //row.appendChild(poster); } } function init() { setup_posters(document.getElementById('ring-1')); setup_posters(document.getElementById('ring-2')); setup_posters(document.getElementById('ring-3')); } // call init once the document is fully loaded window.addEventListener('load', init, false); 

 body { font-family: 'Lucida Grande', Verdana, Arial; font-size: 12px; } #stage { margin: 150px auto; width: 600px; height: 400px; /* Setting the perspective of the contents of the stage but not the stage itself */ -webkit-perspective: 800; } #rotate { margin: 0 auto; width: 600px; height: 400px; /* Ensure that we're in 3D space */ -webkit-transform-style: preserve-3d; /* Make the whole set of rows use the x-axis spin animation for a duration of 7 seconds, running infinitely and linearly */ /* -webkit-animation-name: x-spin; -webkit-animation-duration: 7s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear;*/ } .ring { margin: 0 auto; height: 110px; width: 600px; -webkit-transform-style: preserve-3d; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; } .ring >:nth-child(odd) { background-color: #995C7F; } .ring >:nth-child(even) { background-color: #835A99; } .poster { position: absolute; left: 250px; width: 100px; height: 100px; opacity: 0.7; color: rgba(0, 0, 0, 0.9); -webkit-border-radius: 10px; } .poster > p { font-family: 'Georgia', serif; font-size: 36px; font-weight: bold; text-align: center; margin-top: 28px; } /* Set up each row to have a different animation duration and alternating y-axis rotation directions. */ #ring-1 { -webkit-animation-name: x-spin; -webkit-animation-duration: 2s; } /* #ring-2 { -webkit-animation-name: back-y-spin; -webkit-animation-duration: 4s; } #ring-3 { -webkit-animation-name: y-spin; -webkit-animation-duration: 3s; }*/ /* Here we define each of the three individual animations that we will be using to have our 3D rotation effect. The first animation will perform a full rotation on the x-axis, we'll use that on the whole set of objects. The second and third animations will perform a full rotation on the y-axis in opposite directions, alternating directions between rows. Note that you currently have to specify an intermediate step for rotations even when you are using individual transformation constructs. */ @-webkit-keyframes x-spin { 0% { -webkit-transform: rotateX(0deg); } 50% { -webkit-transform: rotateX(180deg); } 100% { -webkit-transform: rotateX(360deg); } } @-webkit-keyframes y-spin { 0% { -webkit-transform: rotateY(0deg); } 50% { -webkit-transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(360deg); } } @-webkit-keyframes back-y-spin { 0% { -webkit-transform: rotateY(360deg); } 50% { -webkit-transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(0deg); } } 

 <h1>//BOTCHED Poster Circle</h1> <strike> <p>//This is a simple example of how to use CSS transformation and animations to get interesting-looking behavior.</p> <p>The three rings are constructed using a simple JavaScript function that creates elements and assigns them a transform that describes their position in the ring. CSS animations are then used to rotate each ring, and to spin the containing element around too.</p> <p>Note that you can still select the numbers on the ring; everything remains clickable.</p> </strike> <p>Taken from <a href="http://www.webkit.org/blog-files/3d-transforms/poster-circle.html">HERE</a> </p> <div id="stage"> <div id="rotate"> <div id="ring-1" class="ring"> <div class="poster" style="-webkit-transform: rotateX(0deg) translateZ(200px); "> <p>0</p> </div> <div class="poster" style="-webkit-transform: rotateX(30deg) translateZ(200px); "> <p>1</p> </div> <div class="poster" style="-webkit-transform: rotateX(60deg) translateZ(200px); "> <p>2</p> </div> <div class="poster" style="-webkit-transform: rotateX(90deg) translateZ(200px); "> <p>3</p> </div> <div class="poster" style="-webkit-transform: rotateX(120deg) translateZ(200px); "> <p>4</p> </div> <div class="poster" style="-webkit-transform: rotateX(150deg) translateZ(200px); "> <p>5</p> </div> <div class="poster" style="-webkit-transform: rotateX(180deg) translateZ(200px); "> <p>6</p> </div> <div class="poster" style="-webkit-transform: rotateX(210deg) translateZ(200px); "> <p>7</p> </div> <div class="poster" style="-webkit-transform: rotateX(240deg) translateZ(200px); "> <p>8</p> </div> <div class="poster" style="-webkit-transform: rotateX(270deg) translateZ(200px); "> <p>9</p> </div> <div class="poster" style="-webkit-transform: rotateX(300deg) translateZ(200px); "> <p>10</p> </div> <div class="poster" style="-webkit-transform: rotateX(330deg) translateZ(200px); "> <p>11</p> </div> </div> </div> </div> 

在JSFiddle上查看

Answer 2

怎么样http://odhyan.com/slot/使用http://odhyan.com/slot/插件。

我不确定你的关键帧方法是否会产生所需的效果。 老虎机显示器旋转，但由于它具有大直径，它看起来更像是连续滚动。 您需要扭曲图像的顶部和底部，以使它们看起来真实。

如果模糊顶部和底部（透明gif或css3缩进阴影），您可能会接近所需的效果。 观看真实老虎机的视频

Answer 3

如果你对这里的其他一些答案不满意，我会考虑采用另一种（希望更简单）的方法。

• 创建一个垂直条带图像（或div），最顶层的图像是您要停止的图像。
• 使用jquery的.animate()方法在较小的容器div中垂直移动它们，其overflow属性设置为hidden 。 效果将是你一次只能看到一个'旋转'。 如果你快点做，我觉得它看起来很好。
• 玩动画计时，直到你看到逼真的东西。 如果需要让它看起来更酷，可以在容器中添加一些渐变png叠加来模拟3d深度。

它不是一个超现代的CSS3解决方案，但它看起来不错。 我找不到一个js例子，但是这个Flash使用了相同的想法。 这里没有3D; 只是垂直移动的图像。 它有点模糊，但它看起来仍然很酷。 PS我讨厌闪光灯。

Answer 4

在我看来，javascript + trigonometry是你最好的选择。 检查这个动态旋转木马并切换轴，我认为这是你正在寻找的效果。