CMS - Workbench | DE


Templating and Coding for CMS (WordPress, Bludit, Automad, Typesetter, GetSimple, Pico and more)


Rotieren mit CSS

Lassen Sie Grafiken mit Hilfe weniger CSS-Befehle rotieren. Dieser Beitrag zeigt wie einfach das geht.

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 .

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

22.11.2020 • CSS • Rotieren Spiegeln Drehen


Oliver Lohse - Ich bin diplomierter Wirtschafts-Informatiker und Organisations-Programmierer in verschiedenen Sprachen bzw. Markup-Dialekten, z.B.: Java, JEE, COBOL, PHP, Python, MySQL, HTML, CSS, ANSI C, Lisp, Rexx, JavaScript, Scheme, ActionScript 2.0, Maschinensprache, Assembler und JCL. Seit mehr als 22 Jahren arbeite ich in einem grossen Softwareunternehmen in Niedersachsen. Sie sehen auf dieser Seite mein eigens für Bludit CMS entwickeltes Theme "Reaktor-Block IV".

Kontakt: Κontakt@Οliver-Lohse.de



CMS Workbench

Hilfreiche Tipps, Tricks, Codings und Codeschnipsel, die im Rahmen der Entwicklung, Weiterentwicklung und Templatings zum Thema CMS immer wieder benötigt werden - aus verschiedenen Sprachdialekten wie Java, JavaScript, PHP, Python und anderen.