Trick # 501 | Dieser Beitrag beinhaltet 692 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Zugegeben: Der heutige Hack ist eine Spielerei. Und gleich vorneweg: Er lässt sich mit beliebigen Elementen – also auch mit Texten u.ä. – bewerkstelligen. Aber am sinnvollsten (wenn sich denn überhaupt was drehen soll) sind schon Bilder. Wir zeigen Ihnen heute, was Sache ist.
Zunächst platzieren wir mal ein Bild auf der Website. Das sieht dann zum Beispiel so aus wie nebenan:
Um dem Bild die Drehung um die eigene Achse beizubringen, müssen Sie ihm eine CSS-Klasse vergeben. In unserem Fall etwa «looper». Diese Klasse können Sie in HTML einfügen – wenn Sie das Divi-Theme benutzen auch im Tab «Erweitert», unter «CSS-ID und Klassen» im Textfeld «CSS-Klasse».
Ferner benötigen Sie ein paar Zeilen CSS-Code, welche Sie dem CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätzliches CSS) hinzufügen:
.looper {
width: 300px;
animation: perspect 10s infinite linear
}
@keyframes perspect {
0% {transform:perspective(300px) rotateY(0deg)}
25% {transform:perspective(300px) rotateY(90deg)}
50% {transform:perspective(300px) rotateY(180deg)}
75% {transform:perspective(300px) rotateY(270deg)}
100% {transform:perspective(300px) rotateY(360deg)}
}Die Elementgrösse (hier die Breite) können Sie in Zeile 2 festlegen. Die Geschwindigkeit der Animation (in diesem Beispiel ist sie auf 10 Sekunden eingestellt) legen Sie in Zeile 3 fest.
Nun zeigt sich das Photo von oben wie nebenan:
Wie erwähnt, ginge das ganze auch mit Texten:
Lorem ipsum dolor sit amet.
Wieviel Sinn das bei Textblöcken ergibt, müssen Sie allerdings selber beurteilen.
Werbung
Werbung
