Css3 animer une roue

Bonjour à tous,

j'essaie de trouver une solution depuis le début d'après-midi et je cherche sur le net, mais rien n’a faire, mon problème :

Je veux faire rouler une roue... Rien de bien difficile normalement, sauf que je veux le faire en css3.

donc j'utilise ceci :

  
keyframes rotate-roue {
    0% {transform: rotate(360deg) translateX(100px);}
    100% {transform: rotate(360deg) translateX(100px);}
  } 
  section article #roue {
    animation: rotate-roue 2s linear infinite;
  }   

La roue tourne en forme d'escargot ! Je pense que le problème vient du fait que la fonction rotate fais tourné mon axe et que lorsque je souhaite la faire avancer en X ben le X pointe droit vers l'axe...

J'ai essayé de mettre la translation sur un parent, mais le résultat est le même.

Merci par avance à ceux qui me permettront de garder mes cheveux !
Modifié par Christ8phe (20 Jun 2013 - 20:46)

Alors à tête re posé voilà ce qu'il faut faire :

keyframes rotate-coins {
    0% {margin-left: 0; transform: rotate(0deg);}
    100% {margin-left: 300px; transform: rotate(360deg);}
  }  

La nuit porte conseil ! Allez salut...