Перекидные часы

Перекидные часы — это цифровые часы, которые показывают время с анимацией переворачивающихся карточек, вдохновленной классическими механическими перекидными часами середины XX века. Эти культовые часы стали популярны благодаря своему уникальному визуальному эффекту и ностальгическому очарованию, используя физически переворачивающиеся карточки для отображения меняющихся цифр.

Этот инструмент идеально воссоздаёт эффект классических перекидных часов с реалистичной анимацией переворота при каждом изменении цифры. Он работает прямо в браузере без загрузок, с полноэкранным режимом, переключением формата 12/24 часа и опциональным отображением секунд.

Идеально подходит для: настольных часов, украшения офиса, фона для стриминга, таймера презентаций, техники Pomodoro, больших экранов и многого другого. Все вычисления времени производятся локально, защищая вашу конфиденциальность.

Каждая карточка с цифрой разделена на верхнюю половину, показывающую текущее значение, и нижнюю, показывающую следующее, с третьим абсолютно позиционированным слоем, который вращается от 0deg до -180deg вокруг оси X. Родительский элемент получает perspective: 600px, чтобы вращение воспринималось как 3D-глубина, а не вертикальное сжатие, а backface-visibility: hidden на переворачивающемся слое предотвращает просвечивание зеркальной задней грани. Браузер перемещает слой на собственную композитную поверхность при установке will-change: transform, поэтому переворот выполняется на GPU, а не перерисовывает текст на каждом кадре.

Время берётся из Date.now() в миллисекундах с начала Unix-эпохи, но наивный setInterval(fn, 1000) даёт дрейф, потому что таймеры срабатывают по принципу «best-effort» и накапливают отклонение. Инструмент вместо этого планирует следующий тик, вычисляя 1000 - (Date.now() % 1000), чтобы граница попадала на реальную секунду, и использует requestAnimationFrame для анимации переворота, так что анимация автоматически ставится на паузу, когда вкладка теряет фокус или монитор уходит в спящий режим. Page Visibility API (document.visibilityState) повторно синхронизирует отображаемые цифры при visibilitychange, избегая устаревшего значения, когда пользователь возвращается через несколько минут.

Форматирование отображения читает локаль браузера через Intl.DateTimeFormat с опцией hourCycle ('h23' для 24-часового, 'h12' для 12-часового с AM/PM). Переходы летнего/зимнего времени обрабатываются неявно, поскольку методы Date, такие как getHours(), уже возвращают локальное время с учётом смещения, и часы перескакивают с 02:00 на 03:00 весной и показывают 01:00 дважды осенью без дополнительной логики.