Flip Clock

Eine digitale Flip-Clock mit Vollbild, 12/24-Stunden-Modus und optionalen Sekunden.

Zeit wird synchronisiert

Stunden

Minuten

Sekunden

Was ist eine Flip Clock?

Eine Flip Clock ist eine digitale Uhr, die die Zeit mit Kartenwendeanimationen anzeigt, inspiriert von den klassischen mechanischen Klappuhren aus der Mitte des 20. Jahrhunderts. Diese ikonischen Zeitmesser wurden für ihren einzigartigen visuellen Reiz und ihren nostalgischen Charme beliebt und verwendeten physisch umklappende Karten, um wechselnde Zahlen anzuzeigen.

Dieses Tool rekreiert perfekt den klassischen Flip-Clock-Effekt mit realistischen Seitenwende-Animationen bei jeder Ziffernänderung. Es läuft direkt in Ihrem Browser ohne Downloads und bietet Vollbildmodus, 12/24-Stunden-Formatumschaltung und optionale Sekundenanzeige.

Perfekt für: Schreibtischuhr, Bürodekoration, Livestream-Hintergrund, Präsentations-Timer, Pomodoro-Technik, Großbildschirme und mehr. Alle Zeitberechnungen erfolgen lokal und schützen Ihre Privatsphäre.

Anleitung

So wird's verwendet

Die Uhr zeigt automatisch die aktuelle Uhrzeit an und aktualisiert sich in Echtzeit
Klicke auf die Schaltfläche '12H/24H', um das Zeitformat zu wechseln
Klicke auf die Schaltfläche 'Seconds/No seconds', um die Sekundenanzeige ein- oder auszublenden
Klicke auf die Schaltfläche 'Fullscreen', um den Vollbildmodus zu aktivieren
Einstellungen werden automatisch gespeichert und beim nächsten Besuch wiederhergestellt

Tipps

Verwende den Vollbildmodus auf einem Projektor, Wanddisplay oder einem zusätzlichen Tablet, wenn die Uhr von der anderen Seite des Raumes lesbar sein soll.
Deaktiviere den Ruhezustand und die Bildschirmabdunkelung, wenn die Uhr bei Meetings, Vorlesungen oder Veranstaltungen sichtbar bleiben muss.
Wähle die 24-Stunden-Zeit für Zeitpläne, die länderübergreifend geteilt werden, und zeige Sekunden nur an, wenn es auf genaue Zeitangaben ankommt.

Anwendungsfälle

Eine große gut lesbare Uhr auf einem zweiten Bildschirm anzeigenDie aktuelle Ortszeit mit animierten Karten, lokalisiertem Datumstext und optionalem Vollbildmodus für Schreibtische, Studios, Klassenzimmer, Workshops oder Livestream-Hintergründe anzeigen. Da die Seite nur die lokale Systemuhr über die JavaScript Date API liest und CSS3-Transformationen für die Kartenanimation nutzt, wird nie ein Remote-Zeitserver kontaktiert und es ist keine Anmeldung oder Cloud-Konto erforderlich.

Zwischen praktischen Anzeigemodi wechselnSekunden ein- oder ausschalten und zwischen 12- und 24-Stunden-Anzeige wählen – je nachdem, ob die Uhr für präzise Zeitnahme, ambiente Anzeige oder eine Präsentationsfolie gedacht ist. Ohne Sekunden schlagen die Karten einmal pro Minute um, was einen ruhigeren Tick für ambiente Displays ergibt; mit eingeschalteten Sekunden schlagen die Minuten- und Stundenkarten weiterhin am Anfang jeder Minute gemeinsam um, sodass die Seite auch aus der Entfernung gut lesbar bleibt.

Zeitnahme visuell klar halten, ohne Alarme zu konfigurierenDie Seite ist eine Anzeigeuhr, kein Timer oder Scheduler. Sie nutzen, wenn Sichtbarkeit zählt; für Warnungen, Sitzungen oder Zeiterfassung greifen Sie auf Countdown- oder Pomodoro-Tools zurück. Die Systemuhr genau halten, da die Anzeige der lokalen Zeit des Browsers folgt.

Sekunden für Studio-Timing einblenden, für ambiente Displays ausblendenDas Einblenden der Sekundenzeile gibt Aufnahmesessions und Live-Vorträgen einen schärferen Beat; das Ausblenden erzeugt eine ruhigere Anzeige für eine BürOWand, Lobby oder Wartezimmer, wo das Ticken ablenken würde. Die Karte selbst wird mit einer CSS3-3D-Transformation und einem Perspektivwert gerendert, und die Karten nutzen ein monospace Ziffernfeld, sodass die breitere '2' oder die schmalere '1' das Layout nicht verschiebt und keinen 1-Pixel-Jitter bei jedem Tick auslöst.

Die Uhr mit einem separaten Countdown für Sitzungen kombinierenDie Seite ist eine Anzeige, kein Timer – sie zusammen mit einer dedizierten Pomodoro- oder Countdown-App nutzen, wenn Sitzungen, Vorträge oder Meetings ein sichtbares Endsignal benötigen. Die Zeit bleibt über Fenster hinweg konsistent, da beide Seiten dieselbe Systemuhr lesen. Die Vollbildschaltfläche nutzt die Browser requestFullscreen API, um die Seite auf einen Projektor, Kiosk-Display oder ein zusätzliches Tablet zu schieben, ohne die Adressleiste anzuzeigen – ausreichend für eine Konferenzraum-Wanduhr und ohne den zusätzlichen Aufwand einer nativen Kiosk-App.

Technisches Prinzip

Jede Ziffernkarte ist in eine obere Hälfte (aktueller Wert) und eine untere Hälfte (nächster Wert) aufgeteilt, mit einer dritten absolut positionierten Ebene, die sich von 0deg bis -180deg um die X-Achse dreht. Das übergeordnete Element erhält perspective: 600px, damit die Rotation als 3D-Tiefe und nicht als vertikale Stauchung wahrgenommen wird, und backface-visibility: hidden auf der Klappebene verhindert, dass die gespiegelte Rückseite durchscheint. Browser heben die Ebene auf eine eigene Compositor-Surface, wenn will-change: transform gesetzt ist, sodass der Flip auf der GPU läuft statt Text bei jedem Frame neu zu zeichnen.

Die Zeit selbst stammt von Date.now() in Millisekunden seit der Unix-Epoche, aber ein einfaches setInterval(fn, 1000) driftet, da Timer nach best-effort-Scheduling feuern und Abweichungen akkumulieren. Das Tool plant stattdessen den nächsten Tick, indem es 1000 - (Date.now() % 1000) berechnet, sodass der Zeitpunkt auf die tatsächliche Sekundengrenze fällt, und verwendet requestAnimationFrame für die Flip-Animation, damit die Animation automatisch pausiert, wenn der Tab den Fokus verliert oder der Monitor im Ruhezustand ist. Die Page Visibility API (document.visibilityState) synchronisiert die angezeigten Ziffern bei visibilitychange erneut und verhindert so veraltete Werte, wenn der Benutzer nach mehreren Minuten zurückkehrt.

Die Anzeigeformatierung liest aus dem Browser-Locale über Intl.DateTimeFormat mit der hourCycle-Option ('h23' für 24 Stunden, 'h12' für 12 Stunden mit AM/PM). Zeitzonenwechsel (Sommer-/Winterzeit) werden implizit behandelt, da Date-Methoden wie getHours() bereits lokale Zeit inklusive Offset-Verschiebung zurückgeben – die Uhr springt also im Frühling von 02:00 auf 03:00 und zeigt im Herbst 01:00 zweimal an, ohne zusätzliche Logik.

3D-Flip: CSS transform: rotateX(-180deg) auf einer absoluten Ebene, übergeordnetes perspective: 600px, backface-visibility: hidden zur Unterdrückung der gespiegelten Rückseite
GPU-Compositing: will-change: transform hebt das Klapp-Element auf eine eigene Ebene, sodass Übergänge componiert und nicht neu gezeichnet werden
Driftfreier Takt: setTimeout-Verzögerung berechnet als 1000 - (Date.now() % 1000), sodass jeder Tick auf die tatsächliche Sekundengrenze fällt statt Timer-Drift zu akkumulieren
Animations-Timing: requestAnimationFrame steuert den 0deg-zu-180deg-Übergang, den der Browser in Hintergrund-Tabs automatisch drosselt
Hintergrund-Wiederherstellung: Page Visibility API lauscht auf visibilitychange und liest Date.now() erneut, sodass die Ziffern beim Zurückkehren des Tabs auf den korrekten Wert springen
Locale und Stundenzyklus: Intl.DateTimeFormat mit hourCycle 'h23' oder 'h12' wählt 24-Stunden- oder 12-Stunden-AM/PM-Anzeige aus dem System-Locale des Benutzers
Vollbild-Steuerung: Element.requestFullscreen() und document.exitFullscreen() steuern den Wanddisplay-Modus mit Esc als Standard-Taste zum Beenden

Beispiele

Desktop-Nutzung

Browserfenster auf eine Ecke des Desktops verkleinern, um eine dauerhafte Uhr anzuzeigen.

Anzeige auf großem Bildschirm

Beamer oder großes Display anschließen, F11 für Vollbild drücken, in Besprechungsräumen oder bei Veranstaltungen anzeigen.

Hintergrund für Live-Streaming

In OBS eine Browserquelle mit der URL der Flip Clock als Streaming-Hintergrund hinzufügen.

FAQ

Welche Zeitzone verwendet die Uhr?

Die lokale Zeitzone deines Geräts, gesetzt vom Betriebssystem. Um eine andere Zeitzone anzuzeigen, nutze ein dediziertes Weltzeit-Tool. Die Uhr folgt der Zeitvorstellung des Systems, also ändern VPNs und Zeitzonen-Spoofing daran nichts.

Kann ich zwischen 12- und 24-Stunden-Format wechseln?

Ja. Umschalten in den Einstellungen. Das 12-Stunden-Format zeigt AM/PM; das 24-Stunden-Format zeigt 00–23 ohne AM/PM. Wähle eines nach deiner Vorliebe; manche Builds übernehmen standardmäßig die OS-Locale.

Warum springt der Sekundenzeiger manchmal um mehr als eine Sekunde?

Hintergrund-Tab-Drosselung. Wenn du wegwechselst, verlangsamen Browser die Aktualisierungsrate; bei Rückkehr holt die Uhr durch Überspringen auf. Halte den Tab im Vordergrund für eine flüssige Animation. Wenn er auch im Vordergrund springt, ist deine CPU überlastet — prüfe, was sonst noch läuft.

Beeinträchtigt die Flip-Animation die Performance?

Die CSS-Transform-Animation ist GPU-beschleunigt und auf modernen Geräten ressourcenschonend. Auf älteren Laptops oder Handys kann es einmal pro Sekunde leicht ruckeln. Deaktiviere die Flip-Animation in den Einstellungen, wenn du ein statisches Zifferblatt bevorzugst.

Kann ich sie die ganze Nacht im Vollbildmodus laufen lassen?

Ja — sie ist für den Vollbildbetrieb als Schreibtisch- oder Nachttischuhr ausgelegt. Moderne Betriebssysteme dimmen oder schalten das Display ab, sofern du es nicht wachhältst (in den Display-Einstellungen „nie schlafen“ einstellen oder OS-NoSleep nutzen). Auf Laptops am Stromnetz anschließen; Akku-Schlafmodi pausieren den Tab.

Bleibt sie über Stunden genau?

Ja. Die Uhr wird vom Systemtakt angetrieben, der auf vernetzten Geräten über NTP synchron bleibt. Die Drift über einen 24-Stunden-Lauf liegt auf einem modernen OS typischerweise unter einer Sekunde.

Wird etwas hochgeladen?

Nein. Die Uhr liest die Zeit von deinem Gerät. Es wird nichts protokolliert oder übertragen.