Bludit CMS

Bludit CMS Workbench - Codeschnipsel, um das eigene Bludit CMS anzupassen



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.

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);}



Empfehlungen


CSS Anpassungen Blog X

Ein Custom CSS können Sie aus diesem Beitrag kopieren und in Ihr eigenes Bludit-CMS einsetzen. Es verbessert die Anzeige und Darstellung erheblich.


Custom CSS

Sie können das Standard CSS des Bludit Theme mit eigenen Definitionen überschreiben. Dieser Artikel zeigt Ihnen wie es geht.




Es wurden noch keine Kommentare verfasst, sei der erste!

About

Tipps. Tricks, Snippets, Hacks und Codings zum CMS Bludit, Automad, WordPress, Joomla, GetSimple, Typesetter, Nibbleblog oder den angesagten Template Engines wie Smarty.


Impressum - Datenschutz - Copyright - RSS - Kontakt

Leser heute

124