Déplacement de div en simultané

Bonjour,

Je me suis lancé dans le projet de faire un rubik's cube en CSS3, Javascript mais j'ai malheureusement un problème.
J'ai modéliser mon rubik's cube comme étant un ensemble de 27 petits cubes.

Afin d'effectuer les mouvements du rubik's cube, c'est-à-dire, faire tourner la partie gauche entière, ou bien la partie droite,
il faut que je bouge un ensemble de 9 cubes, pour cela, il faudrait que je les bouge tous en simultané, d'une origines différentes pour chacun.

Je me suis donc prêté à l'exercice, mais voilà, mon problème, c'est qu'ils partent tous d'une origines différentes, ça c'est ok, mais lors du mouvement (en CSS3, rotate, translate),
ils reprennent tous la même origine, qui est celle du plan du rubik's cube (partie noir sur l'image).

Et voilà pourquoi je suis ici maintenant, est-il possible de faire bouger plusieurs div en simultané, d'une origine différentes de celle du plan, et de préférence, d'une origine qui leur est propre ?

Merci d'avance pour les réponses, cela est peut-être basique, je me prends peut-être la tête à essayer quelque chose en CSS3 qui est impossible à faire,
le problème étant que je débute, je ne sais pas encore ce qui est réalisable ou pas en CSS3.

Star

Mouvement du cube haut gauche et du cube bas gauche de la face de devant, ils ont exactement la même classe (seg1, pour le premier type de rotation à faire) pour effectuer ce mouvement
Pièce jointe 161408