Rotate square with CSS3

Der erste Code Snippet für einen rotierendes Rechteck

Für die Bewegung sind zwei unterschiedliche Anweisungen nötig. Einmal wird mitHilfe der '@keyframes' festgelegt, was in den einzelnen Abschnitten passieren soll. Hier verwenden wir eine Transformation 'rotate' um jeweils 90°.

Die zweite Anweisung ist die Animation. Zur Definition wird der Name der Keyframes benötigt und anschließend eingestellt, wie schnell die Animation abgespielt werden soll.