Rotieren mit CSS   Mit einfachen CSS Mitteln und Keyframes, können Sie Grafike rotieren lassen, dabei fällt es auch gar nicht auf, das es sich in Wirklichkeit um spiegeln handelt.

____________

« Home

Rotierende Logos (links ein rotierendes PNG-Bild mit freundlicher Genehmigung von: https://sketchnoting.net) oder ähnliche Dinge sind bei Profis zwar absolut verpöhnt, dennoch möchte ich eine einfache Variante mittels CSS zeigen die ich selbst ab und zu verwendet habe. Das CMS Bludit unterstützt dies natürlich nicht in direkter Form, Sie müssen daher händisch tätig werden.

Dennoch mein Rat an dieser Stelle, diese Art der Hervorhebung sehr sehr sehr sparsam zu nutzen, denn auf Dauer können solche Animationen sehr nervig werden. Beschränken Sie die Animation am besten auf eine bestimmte Anzahl an Durchläufen.

So gehts: Zunächst habe einen Keyframe (meine stehen immer am Anfang der CSS-Definitionen ganz oben) in meinem CSS-File angelegt das die folgenden Angaben enthält:

010  @keyframes rotate {
011 from {transform: scale(1, 1);}
012 to {transform: scale(-1, 1);}
013 }
014
015 .rotate {
016 animation-name: rotate;
017 animation-duration: 4s;
018 animation-direction: alternate;
019 animation-timing-function: ease-in-out;
020 animation-iteration-count: 2;
021 }

Der Keyframe rotate skaliert die Grafik (oder etwas anderes) in X-Richtung von 1 (positive Spiegelung) nach -1 (negative Spiegelung). Zusätzlich gibt es eine gleichnamige CSS-Klasse mit der ich die Animation an ein beliebiges Element meiner Webseite hängen kann. Im Beispiel im mit <img src="bild.png" class="rotate">.

020  animation-iteration-count: 2;

Die Variable zum interation-count muss in diesem Beispiel eine gerade Anzahl von Durchläufen enthalten, damit das Beispielbild nicht spiegelverkehrt in Endposition zum stehen kommt. Im Beispiel ist infinite (unendlich) eingestellt.

Der Parameter der Animationsrichtung (direction) mit alternate, bewirkt, das die Spiegelung hin und her wechselt und dadurch ein rotierender Eindruck entsteht, denn die Grafik rotiert nicht in Wirklichkeit, sie wird abwechselnd hin und her gespiegelt.

Soll die Grafik jedoch auf der Y-Achse gedreht (gespiegelt) werden, dann bitte den Keyframe wie folgt anpassen:

011    from {transform: scale(1, 1);}
012 to {transform: scale(1, -1);}


Weiter stöbern


Bludit Admin URL verbergen

Aus Sicherheitsgründen, sollten Sie die üblichen und bekannten admin-URLs unkenntlich machen oder verstecken. Mit diesem Beitrag erledigen Sie dies ganz einfach.

Flieupload aktivieren

Der Fileupload ist bei GetSimple nach der Standard Installation deaktiviert. Dieser Beitrag zeigt Ihnen wie Sie diese nützliche Funktion rasch aktivieren.


Autor: Oliver Lohse   Datum: 2020-07-30   Kategorie: CSS   Schlagworte: CSS • Rotieren • Drehen • Keyframes