![](https://mariawiedner.de/wp-content/uploads/2022/12/webdesignexpertin-2.png)
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.
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.