Support Bereich Hier finden Sie Antworten auf alle Fragen zu Ihrem Xobor Forum.
Wählen Sie zunächst einen Hilfe-Bereich.

Die perspektivische(3D) rotation von Ludger ist natürlich noch schöner .

...selbst wenn man keine Grafik für den Schalter erstellt, würde ja [looper][/looper] in der Iconbar erscheinen.

Nein, eine Grafik habe ich da nicht eingetragen.
In der Navileiste steht halt [looper[/looper] statt der Grafik.

Ist die Grafik denn Notwendig?

Ich hab jetzt nochmal.gespeichert.

Nun erscheint statt der Grafik rotierende Quadrate im Beitrag statt der Grafik.

...also die keyframe animation von Ludger funktioniert definitiv. Ich hab das nun doch mal in meinem Adventskalender getestet, (kann man über Klick auf das Sternchem in der Signatur einsehen.

Da rotieren die einzelnen Klappen nach dem Beispiel von @Ludger

... kann der Fehler eigentlich nur noch in der BB Einbindung liegen...

Zitat von Ludger im Beitrag #23

---

@Scannerxy

zwischen looper und looper kommt nur die Bildadresse ohne img
[looper]https://files.homepagemodules.de/b135428/f277t82465p563396n11_bZoMKtAY.gif[/looper]

---

...so es sich um eine foreninterne Grafik handelt, kann man das https: auch weglassen

... wenn man im CSS style des Eingangsbeitrages das Attribut "infinite" ,(engl=unendlich), entfernt, wird die Animation jeweils nur 1x ausgeführt, wenn man die Anwendung aufruft.

Nur so nebenbei bemerkt für alle, die keine ständig drehenden Grafiken mögen.

(Beispiel: → *hier*
Die Klappen drehen sich exakt 1x nach dem keyframe von @Ludger und bleiben dann stehen)


MfG

...wenn man den keyframe von @Ludger aus Beitrag#1 noch etwas ausweitet,
rotieren die Grafiken sowohl über die Y- als auch über die X-Achse.

(das ergibt dann einen recht spannenden mehrdimensionalen Effekt, den man hier unschwer per CSS realisieren kann.
Für Interessierte zum ausprobieren)

@keyframes perspect {
   0% {transform:perspective(300px) rotateY(0deg) rotateX(0deg)}
   25% {transform:perspective(300px) rotateY(90deg) rotateX(90deg)}
   50% {transform:perspective(300px) rotateY(180deg) rotateX(180deg)}
   75% {transform:perspective(300px) rotateY(270deg) rotateX(270deg)}
   100% {transform:perspective(300px) rotateY(360deg) rotateX(360deg)}  
}