Web: 3D Animation

Dezente 3D-Animationen haben was, finde ich 😀.

Mit Hilfe von CSS sind diese auch relativ einfach und mit wenig Code machbar. Dennoch gibt es ein paar Kleinigkeiten, die es zu berücksichtigen gilt.

Ich verwende in meinen Beispielen so gut es geht Tailwind und nur für die Spezialitäten klassisches CSS. Da Tailwind per heute keine speziellen Klassen für Perspektive hat, sind Eigenschaften alle in CSS gelöst.

Die Besonderheiten im vorherigen Beispiel sind „perspective“ und „perspective-origin“.

„perspective“ definiert, wie weit der Benutzer vom Bildschirm wegsitzt. Klingt komisch – ist es auch 😜. Genau das Gleiche steht aber auch bei MDN, ist also keine Erfindung von mir. Ich glaube, es gibt mittlerweile den Konsens, dass man mit dem Wert einfach ein bisschen herumspielen muss, bis man einen findet, der passt.

Die spannendere Eigenschaft ist allerdings „perspective-origin“. Dieser gibt an, welcher Punkt das Zentrum der Perspektive ist.

Im Beispiel gibt es den eigentlichen Button und daneben das Icon, das angezeigt wird, wenn der Benutzer auf den Button klickt. Das Icon wird über eine Rotation der Y-Achse angezeigt. Damit das Ganze korrekt aussieht, muss der Origin genau zwischen dem Button und dem Icon sein. Da mein Icon keine fixe Größe hat, wird die Breite mit Hilfe von JavaScript zur Laufzeit berechnet, der passende „perspective-origin“ gesetzt – indem Fall 100 % abzüglich der Breite des Icons.

Das nächste Beispiel hat ebenso eine Perspektive sowie zusätzlich einen „clip-path“. Mit diesem können Aufklapp-Animationen super einfach gelöst werden.

Zusammen mit der aktuellen Position der Mause können darüber hinaus recht hübsche Spielereien gemacht werden.