animacion para girar un cubo

buenas de nuevo queria ver si alguien me puede ayudar a girar este cubo sobre su propio eje horizontalmente pero manteniendo la forma de rombo, es que ami se me va de un lado de lka pantalla a otra y no consigo la propiedad desde donde debe girar y siempre gira sobre una esquina(solo con css3 por favor)lo que tengo es esto:
html:
<div id="cubo">
<div id="arriba"></div>
<div id="abajo"></div>
<div id="derecha"></div>
<div id="izquierda"></div>
<div id="atras"></div>
<div id="delante"></div>
</div>

css:
#cubo{transform-style:preserve-3d;margin:300px 300px;transform:perspective(7000px) rotatex(45deg) rotatey(45deg);}

#cubo:hover{animation:animacion ease 2s forwards;}

@keyframes animacion{
0%{transform:rotatey(75deg);transform:rotatex(95deg);}
25%{transform:rotatey(100deg);transform:rotatex(75deg);}
75%{transform:rotatey(200deg);transform:rotatex(50deg);}
100%{transform:rotatey(275deg);transform:rotatex(25deg);}

}
#arriba{position:absolute;background-color:green;width:200px;height:200px;
transform:rotatex(90deg) translatez(100px);
}

#abajo{position:absolute;background-color:red;width:200px;height:200px;
transform:rotatex(-90deg) translatez(100px);
}

#derecha{position:absolute;background-color:blue;width:200px;height:200px;
transform:rotatey(90deg) translatez(100px);
}

#izquierda{position:absolute;background-color:yellow;width:200px;height:200px;
transform:rotatey(-90deg) translatez(100px);
}

#atras{position:absolute;background-color:orange;width:200px;height:200px;
transform:translatez(-100px);
}

#delante{position:absolute;background-color:black;width:200px;height:200px;
transform:translatez(100px);
}

Yo hice un cubo similar hace algún tiempo, te dejo el enlace al articulo para que le eches un vistazo al código: transform y perspective

Saludos!

gracias agustin al final puse una galeria fotografica pero me servira para otros proyectos

Gracias por el artículo agustin, yo no buscaba un cubo pero si me sirvió gran parte del código.