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

JavaScript - Möchten Sie sich für Ihren Job oder Ihr Studium einen Vorteil verschaffen und objektorientiertes Programmieren lernen? Wollen Sie Ihre eigenen Codes schreiben, auch wenn Sie noch keine Ahnung von Programmiersprachen haben? Brauchen Sie eine Schritt-für Schritt Anleitung, mit der Sie mühelos Ihre ersten eigenen Befehle in Java erstellen können? (*

lesen...

© CMSWorkbench.de

about me

About me

Mein Name ist Oliver Lohse. Ich bin diplomierter Wirtschafts-Informatiker und Organisations-Programmierer in verschiedenen Programmier-Sprachen und 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 24 Jahren arbeite ich als Entwickler in einem großen Softwareunternehmen für Versicherungen in Hannover Niedersachsen und seit etwa 37 Jahren im EDV-Sektor mit wechselnden Aufgaben.