Как я могу добиться эффекта отслоения игрового автомата с помощью CSS3 & jQuery?

Я создаю демонстрационное приложение, которое случайным образом выбирает место, когда нажимается кнопка. Как только кнопка нажата, я хочу, чтобы места прокручивались с помощью анимации анимации игрового автомата с использованием 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;
}

Может ли кто-нибудь дать представление о том, как это можно достичь? Здесь есть то, что у меня есть до сих пор. Любая помощь приветствуется.

Спасибо

ОТВЕТЫ

Ответ 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>

Ответ 2

как насчет http://odhyan.com/slot/, который использует плагин http://odhyan.com/slot/.

Я не уверен, что ваш ключевой кадр с вращением создаст желаемый эффект. Дисплей игрового автомата вращается, но поскольку он имеет большой диаметр, он больше похож на продолженный свиток. Вам нужно будет исказить верхнюю и нижнюю части изображений, чтобы они выглядели реалистично.

Если вы размываете верхнюю и нижнюю (прозрачную gif или css3 с отступом), вы можете приблизиться к желаемому эффекту. Смотрите видео настоящего игрового автомата

Ответ 3

Если вас не устраивают некоторые другие ответы здесь, я бы рассмотрел вопрос о другом (надеюсь, более простом) подходе.

  • Создайте вертикальную полосу изображений (или разделов), причем самое высокое изображение будет тем, над которым вы хотите остановиться.
  • Используйте метод jquery .animate() для перемещения их по вертикали внутри меньшего контейнера div, у которого overflow установлено значение hidden. Эффект будет заключаться в том, что вы видите только один за раз, "вращаясь". Если вы сделаете это быстро, я думаю, что все будет хорошо.
  • Играйте с анимацией, пока не получите что-то, что выглядит реалистично. Если вам нужно сделать его более крутым, вы можете добавить в контейнер некоторые градиентные наложения png, чтобы имитировать глубину 3d.

Это не суперсовременное решение CSS3, но оно будет выглядеть красиво. Я не смог найти пример js, но этот Flash один использует ту же идею. Здесь нет 3d; просто вертикально движущиеся изображения. Он немного размыт, но он все равно будет выглядеть круто с ним. PS Я ненавижу вспышку.

Ответ 4

На мой взгляд, javascript + тригонометрия - ваш лучший выбор. Проверьте динамическую карусель и переключите ось, я думаю, что это тот эффект, который вы ищете.