Вращающийся барабан на javascript?

Question

[Максим]

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

Есть ли готовые библиотеки, позволяющие реализовать такое? Если нет, каков алгоритм реализации подобного скрипта?

Answer 1

[Александр Таратин]

Update 14.10.2017

jsfiddle.net/9x0tguq2/102

Comments

[Александр Таратин]

Andrey Stark, Обновил ответ.

Answer 2

[xmoonlight]

CSS3 animation:

.element-animation{
  animation: animationFrames ease 3s;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animationFrames ease 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-transform-origin: 50% 50%;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animationFrames ease 3s;
  -moz-animation-iteration-count: infinite;
  -moz-transform-origin: 50% 50%;
  -moz-animation-fill-mode:forwards; /*FF 5+*/
  -o-animation: animationFrames ease 3s;
  -o-animation-iteration-count: infinite;
  -o-transform-origin: 50% 50%;
  -o-animation-fill-mode:forwards; /*Not implemented yet*/
  -ms-animation: animationFrames ease 3s;
  -ms-animation-iteration-count: infinite;
  -ms-transform-origin: 50% 50%;
  -ms-animation-fill-mode:forwards; /*IE 10+*/
}

@keyframes animationFrames{
  0% {
    transform:  rotate(0deg) ;
  }
  100% {
    transform:  rotate(3600deg) ;
  }
}

@-moz-keyframes animationFrames{
  0% {
    -moz-transform:  rotate(0deg) ;
  }
  100% {
    -moz-transform:  rotate(3600deg) ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    -webkit-transform:  rotate(0deg) ;
  }
  100% {
    -webkit-transform:  rotate(3600deg) ;
  }
}

@-o-keyframes animationFrames {
  0% {
    -o-transform:  rotate(0deg) ;
  }
  100% {
    -o-transform:  rotate(3600deg) ;
  }
}

@-ms-keyframes animationFrames {
  0% {
    -ms-transform:  rotate(0deg) ;
  }
  100% {
    -ms-transform:  rotate(3600deg) ;
  }
}