MW

Hast du noch Fragen? Schreibe mir einfach eine Nachricht!

Wie kann ich per CSS sich ein Bild im Kreis drehen lassen?

Ein um die eigene Achse drehendes Element gehört zu den Animationen, die leicht umsetzbar sind und häufig auf Websites zu sehen sind. Wie setzt man das mit Hilfe von CSS um?

Die Animation ist in zwei Schritten umsetzbar. Als erstes müssen wir für unser Objekt einen Class setzen. Wenn du Elementor für WordPress nutzt, geht das sehr einfach.

So bringst du dein Objekt zum Drehen

Gehe zum ausgewählten Objekt, klicke auf Erweitert und unter der CSS-Klassen gib die Klasse rotate an.

Anschließend füge den folgenden CSS-Code hinzu.

CSS-Code:

.rotate {
display: inline-block;
-webkit-animation: rotate 4s linear infinite;
animation: rotate 4s linear infinite;
}

@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

Wenn du möchtest, dass sich dein Objekt schneller dreht, setze den Wert für die Geschwindigkeit niedriger als 4 Sekunden ein. Wenn du möchtest, dass dein Objekt sich langsamer dreht, setzte diesen Wert auf höher als 4 Sekunden.

Falls du dir wünschst, dass sich das Objekt in die Gegenrichtung dreht, ändere 360deg in -360deg.

Was kannst du zum Drehen bringen lassen?

Runde Objekte eignen sich am besten. Ein um einen Kreis platzierter Text wird häufig auch auf diese Weise animiert.

Falls du Fragen hast oder etwas bei dir nicht klappt, melde dich.

Ich bin Maria Wiedner und ich erstelle Websites für selbstständige Frauen und kleine Unternehmen. Erstelle mit mir zusammen deine Website!

Hallo, ich bin Maria!

Mein Ziel ist es, die Websites zu erstellen, die deine Kunden aufhören lassen zu scrollen und stattdessen beginnen mit dir zu interagieren und sich am Ende für dich entscheiden.