Weder transition noch animation bietet komfortable Möglichkeiten, vor und nach der Animation die richtigen Bilder zuzuweisen. Deshalb habe ich hier auf das TweenMax Javascript Framewort von greensock zurückgegriffen. Es wird die TweenMax.min.js benötigt.
Ich habe auch ein kleines Greensock Tutorial erstellt.
In diesem Fall brauchte ich eine komfortable Möglichkeit nach der Animation andere Bilder zuzuweisen. Hier bietet Greensock die Funktion onComplete. Nach der Animation wird die Funktion endeTween aufgerufen. Dort bekommt #buch seinen Anfangs rotateY Winkel und alle Bilder werden entsprechend zugewiesen. Damit das am Ende nicht so kompliziert ist, habe ich die beiden Anfangsbilder b0.jpg und b1.jpg nochmals mit den Namen b12.jpg und b13.jpg hinzugefügt, das vereinfacht die Programmierung.