我如何使用javascript在类似IOS Picker视图的对象上创建轻拂的“ momemtum效果”

Question

http://codepen.io/PageOnline/pen/Lkdue

the link above is to a "safe" type combo lock when you click on one of the numbers it moves to the next. (as expected). I am trying to re-create this but instead use a "flick" motion to be able to spin it using ccs 3 rotate z. the problem is i cannot find any examples or "stack" questions that address momentum and inertia that don't involve canvas. is there any other way to be able to "flick" the numbers so they spin and slow down and eventually stop? kind of like IOS pickers?

thanks in advance.

Answer 1

You could use the keyframes for the speeding up and slowing down part. That's the most I can do for you. http://jsfiddle.net/p8GWT/

    #logo:hover{
  -webkit-animation-name: rotateThis;
  -webkit-animation-duration:2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function:ease-in-out;

  -moz-animation-name: rotateThis;
  -moz-animation-duration:2s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function:ease-in-out;

  -ms-animation-name: rotateThis;
  -ms-animation-duration:2s;
  -ms-animation-iteration-count: 1;
  -ms-animation-timing-function:ease-in-out;

  animation-name: rotateThis;
  animation-duration:2s;
  animation-iteration-count: 1;
  animation-timing-function:ease-in-out;
}
@-webkit-keyframes rotateThis {
    0% { -webkit-transform:scale(1) rotate(0deg); }
    10% { -webkit-transform:scale(1.1) rotate(0deg); }
    90% {-webkit-transform:scale(1.1) rotate(360deg);}
    100% { -webkit-transform:scale(1) rotate(360deg); }
}
@-moz-keyframes rotateThis {
    0% { -moz-transform:scale(1) rotate(0deg); }
    10% { -moz-transform:scale(1.1) rotate(0deg); }
    90% {-moz-transform:scale(1.1) rotate(360deg);}
    100% { -moz-transform:scale(1) rotate(360deg); }
}
@-ms-keyframes rotateThis {
    0% { -ms-transform:scale(1) rotate(0deg); }
    10% { -ms-transform:scale(1.1) rotate(0deg); }
    90% {-ms-transform:scale(1.1) rotate(360deg);}
    100% { -ms-transform:scale(1) rotate(360deg); }
}
@keyframes rotateThis {
    0% { transform:scale(1) rotate(0deg); }
    10% { transform:scale(1.1) rotate(0deg); }
    90% { transform:scale(1.1) rotate(360deg);}
    100% { transform:scale(1) rotate(360deg); }
}