Comment puis-je obtenir un effet de rotation de machine à sous avec CSS3 & amp; jQuery?

Je suis entrain de créer une application démo qui choisit aléatoirement un site quand on clique sur un bouton. Une fois que le bouton est cliqué, je veux avoir le lieux de défiler avec une machine à sous animation de rotation à l'aide de CSS3 et jQuery avant qu'un lieu est sélectionné.

J'ai pensé à utiliser -webkit-keyframes et en changeant le fond, mais ce n'est pas l'idéal d'animation que j'aimerais.

@-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;
}

Quelqu'un peut donner aucune indication sur la façon dont cela peut être réalisé? Ici est ce que j'ai jusqu'à présent. Toute aide est appréciée.

Merci

source d'informationauteur Austin M

  1. 6

    comment sur http://odhyan.com/slot/ qui utilise le http://odhyan.com/slot/ plugin.

    Je ne suis pas sûr si votre image-clé de l'approche avec la rotation de créer l'effet désiré. La machine à sous affichage pivote, mais depuis, il a de grand diamètre, il ressemble plus à une continue de défilement. Vous aurez besoin de fausser le haut et le bas de l'image, afin de leur donner un aspect réaliste.

    Si vous flou en haut et en bas (gif transparent ou css3 en retrait de l'ombre), vous pourriez me rapprocher de l'effet désiré. Voir un vidéo d'une véritable machine à sous

  2. 1

    Si vous n'êtes pas heureux avec certains des autres réponses ici, je voudrais envisager de prendre un autre (espérons-le plus simple) approche.

    • Créer une bande verticale des images (ou des divs), avec la partie la plus haute de l'image de celui que vous voulez arrêter.
    • Utilisation de jquery .animate() méthode pour déplacer verticalement à l'intérieur d'un récipient plus petit div, qui overflow propriété est définie à hidden. L'effet sera que vous ne voyez qu'une seule à la fois, 'tourner'. Si vous le faites rapidement, je pense qu'il va bien.
    • Jouer avec le minutage de l'animation jusqu'à ce que vous obtenez quelque chose qui semble réaliste. Si vous avez besoin pour le faire paraître plus frais, vous pouvez ajouter un peu de gradient png superpositions pour le conteneur pour simuler la profondeur 3d.

    Ce n'est pas un super-moderne CSS3 solution, mais ça va être joli. Je ne pouvais pas trouver un js exemple, mais ce Flash un utilise la même idée. Il n'y a pas de 3d ici, juste à la verticale des images en mouvement. Il a un peu de flou, mais ça va encore look cool w/o il. PS je déteste le flash.

  3. 1

    À mon avis, javascript + trigonométrie est votre meilleur pari. Découvrez ce dynamique carrousel et de bascule de l'axe, je pense que c'est l'effet que vous recherchez.