3D, animation

[Rolf B]

Hallo mathefritz,

da hast Du noch einiges nicht verstanden. Die Ausgangstransformation translateZ(58px) darfst Du mit der Rotation nicht anpassen. Wenn Du zuerst den translateZ und dann den rotateX machst, ist der Effekt ja gerade, dass der Verschiebungsvektor (0,0,58) mit um die X-Achse rotiert und das Panel mitnimmt. Wenn Du den Vektor während der Rotation änderst, flattert das Panel herum.

Eine Y-Verschiebung musst du nach der Rotation machen. Andernfalls rotierst Du keinen Dreiecksstab, sondern so eine Art Schaufelradbagger. Guck nachher mal in mein unten verlinktes Fiddle und setze den translateY wieder ein. Aber erst hier weiterlesen!

rotate3d(1,0,0,42deg) kann man schreiben, das ist umständlich für rotateX(42deg).

Den Überlauf über die 360deg darfst Du nur beim Übergang 100% zu 0% machen. Andernfalls schlägt das Panel einen Extra-Salto.

Und du brauchst 7 Stützwerte für die Winkelpositionen, nicht 6, weil zwischen 100% und 0% keine Zeit vergeht. Dies dann in Schritten von 100/6 Prozent; Nachkommastellen kannst Du wegrunden, es kommt da nicht so genau drauf an. Hauptsache, alle Animationen haben die gleichen Stützpunkte.

Wenn man dem Prisma noch Perspektive und preserve-3d gibt und es leicht um die Y-Achse dreht, kann man die Animation "von der Seite" betrachten.

Das alles habe ich hier mal gebaut. Die Keyframes müsste man noch vereinfachen können, dazu liefere ich noch was nach.

Rolf