Modifier le sens des transitions CSS d'images issues d'un tileset

Bonjour!

Je m'amuse à faire un petit jeu à base de tiles. Je souhaite simuler les déplacements en effectuant des transitions CSS sur chacun des tiles. Par exemple si j'appuie sur la touche flèche du bas, je veux que tous mes tiles effectuent une transition du bas vers le haut.

J'ai essayé avec un petit exemple, aussi disponible sur http://jsfiddle.net/DM46s/9/.

Code:

---

1 2 3 4 5 6

$(document).keydown(function (e) { // press down arrow key if (e.keyCode == 40) { $('.example').css({'background-position':'-32px 0'}); } });

---

Code:

---

1 2 3 4 5 6 7 8 9

.example{ width:32px; height:32px; background: url(http://oi41.tinypic.com/2vrzj0k.jpg) 0px 0px no-repeat; -webkit-transition:all 1s linear; -moz-transition:all 1s linear; -o-transition:all 1s linear; transition:all 1s linear; }

---

Code:

---

<div class="example"></div>

---

Le problème est que le sens de la transition dépend de la position, dans le tileset, du prochain tile par rapport au tile courant. Dans l'exemple, le prochain tile est placé à gauche du tile courant, la transition se fait donc de droite à gauche.

Je voulais savoir si il existait un moyen propre de faire ce que je veux, sans devoir rajouter des élements dans le fichier html?

Merci bien!