#buch figure.front{transform: translateX(-100px) ;}
#buch figure.front{transform: translateZ(-100px) translateX(-100px) rotateX(90deg);}
Teste verschiedene Verschiebungswerte und Rotationswerte, um zu verstehen, wie das Ganz funktioniert. Vergebe dem Elternelement #buch eine Hintergrundfarbe, das verdeutlicht die Tatsache, dass das #buch gedreht wird. Die Seite oder Seiten liegen versetzt im #buch. Durch die Versetzung verschiebt sich der Drehwinkel der Seiten.
Auf diese Art erzeugt man auch einen Würfel. Man fügt 6 Seiten ein, verschiebt und verdreht diese jeweils so, dass sie die 6 Seiten des Würfels bilden. Auch beim Würfel wird dann nur das Elternelement gedreht.