Reloj de solapas

Reloj digital con animación de solapas, pantalla completa, modo 12/24 horas y segundos opcionales.

Sincronizando hora

Horas

Minutos

Segundos

¿Qué es un reloj de solapas?

Un reloj de solapas es un reloj digital que muestra la hora con animaciones de tarjetas giratorias, inspirado en los clásicos relojes mecánicos de solapas del siglo XX. Estos icónicos relojes se hicieron populares por su atractivo visual único y su encanto nostálgico, utilizando tarjetas físicas que giran para mostrar los números cambiantes. Esta herramienta recrea perfectamente el efecto clásico del reloj de solapas con animaciones realistas de giro para cada cambio de dígito. Funciona directamente en tu navegador sin descargas, con modo pantalla completa, cambio de formato 12/24 horas y visualización opcional de segundos. Perfecto para: reloj de escritorio, decoración de oficina, fondo de transmisión en vivo, temporizador de presentaciones, técnica Pomodoro, pantallas grandes y más. Todos los cálculos de tiempo se realizan localmente, protegiendo tu privacidad.

Cómo usar

El reloj muestra automáticamente la hora actual y se actualiza en tiempo real
Haz clic en el botón '12H/24H' para cambiar el formato de hora
Haz clic en el botón 'Segundos/Sin segundos' para alternar la visualización de segundos
Haz clic en el botón 'Pantalla completa' para entrar en modo pantalla completa
La configuración se guarda automáticamente y se restaura en la próxima visita

Consejos

Usa el modo pantalla completa en un proyector, pantalla de pared o tableta de repuesto cuando el reloj deba ser legible desde el otro lado de la sala.
Deshabilita el reposo del sistema o el atenuado de pantalla si el reloj debe permanecer visible durante reuniones, clases o eventos.
Elige el formato de 24 horas para horarios compartidos entre regiones, y muestra segundos solo cuando la precisión temporal sea importante.

Casos de uso

Mostrar un reloj grande y legible en una segunda pantallaMuestra la hora local actual con tarjetas de solapas animadas, texto de fecha localizado y un escenario de pantalla completa opcional para escritorios, estudios, aulas, talleres o fondos de retransmisión en vivo. Como la página solo lee el reloj del sistema local a través de la API Date de JavaScript y usa transformaciones CSS3 para la animación de solapas, nunca llama a un servidor de hora remoto ni requiere inicio de sesión o cuenta en la nube para seguir funcionando.

Alternar entre modos de visualización prácticosActiva o desactiva los segundos y elige formato de 12 u 24 horas según si el reloj es para medición precisa, visualización ambiental o pantalla de presentación. Con los segundos ocultos, las tarjetas se voltean una vez por minuto, lo que produce un tic más suave adecuado para displays ambientales; con los segundos activados, las tarjetas de minuto y hora siguen volteando juntas al inicio de cada minuto para que la página siga siendo legible a distancia.

Mantener la medición visualmente clara sin configurar alarmasLa página es un reloj de visualización, no un temporizador ni un programador. Úsala cuando la visibilidad importe; usa herramientas de cuenta regresiva o pomodoro cuando necesites alertas, sesiones o seguimiento de tiempo transcurrido. Mantén el reloj del sistema preciso porque la visualización sigue la hora local del navegador.

Activar segundos para estudios, ocultarlos para ambienteActivar la fila de segundos da un ritmo más marcado para sesiones de grabación y charlas en vivo; desactivarla produce una visualización más tranquila para una pared de oficina, vestíbulo o sala de espera donde el tictac sería molesto. La solapa se renderiza con una transformación CSS3 3D usando un valor de perspectiva, y las tarjetas usan una ranura numérica monoespaciada para que el '2' más ancho o el '1' más estrecho no desplace el diseño ni provoque un temblor de 1 píxel en cada tic.

Combinar el reloj con una cuenta regresiva separada para sesionesLa página es una visualización, no un temporizador, así que úsala con una aplicación dedicada de pomodoro o cuenta regresiva cuando las sesiones, charlas o reuniones necesiten un marcador de fin visible. La hora se mantiene consistente entre ventanas ya que ambas páginas leen el mismo reloj del sistema. El botón de pantalla completa usa la API requestFullscreen del navegador para enviar la página a un proyector, quiosco o tablet de repuesto sin mostrar la barra de direcciones, lo cual es suficiente para un reloj de pared de sala de reuniones y evita la configuración extra de una aplicación nativa de quiosco.

Principio técnico

Cada dígito de la tarjeta se divide en una mitad superior que muestra el valor actual y una mitad inferior que muestra el valor siguiente, con una tercera capa posicionada absolutamente que rota desde 0deg hasta -180deg alrededor del eje X. El padre recibe perspective: 600px para que la rotación se perciba como profundidad 3D en lugar de un aplastamiento vertical, y backface-visibility: hidden en la capa que se voltea evita que la cara trasera espejeada se filtre. Los navegadores promueven la capa a su propia superficie del compositor cuando se establece will-change: transform, por lo que la animación de giro se ejecuta en la GPU en lugar de repintar el texto en cada fotograma.

El tiempo proviene de Date.now() en milisegundos desde la época Unix, pero un setInterval(fn, 1000) ingenuo se desincroniza porque los temporizadores se ejecutan bajo programación de mejor esfuerzo y acumulan desviación. La herramienta en su lugar programa el siguiente tick calculando 1000 - (Date.now() % 1000) para que el límite coincida con el segundo real del reloj, y usa requestAnimationFrame para la transición de giro de modo que la animación se pausa automáticamente cuando la pestaña pierde foco o el monitor está en reposo. La API Page Visibility (document.visibilityState) re-sincroniza los dígitos mostrados en el evento visibilitychange, evitando un valor obsoleto cuando el usuario regresa tras varios minutos.

El formato de visualización lee la configuración regional del navegador mediante Intl.DateTimeFormat con la opción hourCycle ('h23' para 24 horas, 'h12' para 12 horas con AM/PM). Las transiciones de horario de verano se manejan implícitamente porque los métodos de Date como getHours() ya devuelven la hora local incluyendo los cambios de desplazamiento, por lo que el reloj salta de 02:00 a 03:00 en primavera y muestra 01:00 dos veces en otoño sin lógica adicional.

Giro 3D: CSS transform: rotateX(-180deg) en una capa absoluta, perspective: 600px en el padre, backface-visibility: hidden para suprimir la cara trasera espejeada
Composición en GPU: will-change: transform promueve el elemento que se voltea a su propia capa para que las transiciones se compongan en lugar de repintarse
Tick sin deriva: el retardo de setTimeout se calcula como 1000 - (Date.now() % 1000) para que cada tick se alinee con el límite real del segundo en lugar de acumular desviación del temporizador
Temporización de animación: requestAnimationFrame impulsa la transición de 0deg a -180deg, que el navegador limita automáticamente en pestañas en segundo plano
Recuperación en segundo plano: la API Page Visibility escucha visibilitychange y relee Date.now() para que los dígitos salten al valor correcto cuando la pestaña recupera el foco
Configuración regional y ciclo horario: Intl.DateTimeFormat con hourCycle 'h23' o 'h12' selecciona la visualización en formato 24 horas o 12 horas AM/PM a partir de la configuración regional del sistema del usuario
Control de pantalla completa: Element.requestFullscreen() y document.exitFullscreen() gestionan el modo de visualización en pared con Esc como tecla de salida estándar

Ejemplos

Uso en escritorio

Redimensiona la ventana del navegador para colocarla en una esquina del escritorio como reloj permanente.

Visualización en pantalla grande

Conecta un proyector o pantalla grande, presiona F11 para pantalla completa y muéstralo en salas de reuniones o eventos.

Fondo para transmisiones en vivo

Añade una fuente de navegador en OBS con la URL del flip clock como fondo de tu transmisión.

Preguntas frecuentes

¿Qué zona horaria usa el reloj?

La zona horaria local de tu dispositivo, configurada en el sistema operativo. Para mostrar otra zona, usa una herramienta de reloj mundial dedicada. El reloj sigue la noción del sistema sobre la hora, así que las VPN y la suplantación de zona horaria no lo cambian.

¿Puedo cambiar entre formato de 12 y 24 horas?

Sí. Cámbialo en los ajustes. El formato de 12 horas muestra AM/PM; el de 24 muestra de 00 a 23 sin AM/PM. Elige uno u otro según prefieras; algunas versiones se ajustan al locale del sistema por defecto.

¿Por qué a veces el segundero salta más de un segundo?

Throttling de pestañas en segundo plano. Cuando cambias de pestaña, los navegadores reducen la frecuencia de actualización; al volver, el reloj se pone al día saltando segundos. Mantén la pestaña enfocada para una animación fluida. Si salta estando enfocada, tu CPU está sobrecargada: revisa qué más está corriendo.

¿La animación de volteo afecta al rendimiento?

La animación CSS transform está acelerada por GPU y es ligera en dispositivos modernos. En portátiles o móviles antiguos puedes notar un pequeño tirón cada segundo. Desactiva la animación de volteo en los ajustes si prefieres una esfera estática.

¿Puedo dejarlo en pantalla completa toda la noche?

Sí, está pensado para uso a pantalla completa como reloj de mesa o de mesilla. Los sistemas operativos modernos atenuarán o suspenderán la pantalla salvo que la mantengas activa (configura «no suspender» en los ajustes de pantalla, o usa NoSleep del SO). En portátiles, conéctalo a la corriente; los modos de suspensión por batería pausarán la pestaña.

¿Mantendrá la precisión durante horas?

Sí. El reloj se basa en el reloj del sistema, que se mantiene sincronizado vía NTP en dispositivos conectados. La deriva en una sesión de 24 horas suele ser de menos de un segundo en un SO moderno.

¿Se sube algo a un servidor?

No. El reloj lee la hora de tu dispositivo. Nada se registra ni se transmite.

Herramientas relacionadas

Reloj Mundial

Herramienta gratuita de reloj mundial en línea. Consulta la hora, fecha y día de la semana de ciudades de todo el mundo. Busca zonas horarias y muestra la diferencia con la hora local.

Temporizador de Cuenta Regresiva

Temporizador de cuenta regresiva en línea gratuito para crear cuentas regresivas personalizadas. Establece tiempo objetivo, funciones de recordatorio, preciso a segundos.

Temporizador Pomodoro

Temporizador Pomodoro en línea gratuito para gestión científica del tiempo. 25 minutos de trabajo enfocado, 5 minutos de descanso corto, aumenta la productividad y construye hábitos de enfoque.

Herramienta de Conversión de Timestamp

Conversor de timestamp en línea gratuito para conversión entre timestamp Unix y formato de fecha. Soporta timestamps de milisegundos y segundos, muestra múltiples zonas horarias.

Prueba de Pantalla

Herramienta de prueba de pantalla en línea gratuita para detectar píxeles muertos, puntos brillantes y sangrado de luz. Múltiples pruebas de color sólido, evalúa calidad de pantalla.

Herramienta de Cuenta Regresiva Gaokao

Contador regresivo del Gaokao, cálculo en tiempo real de días, horas, minutos y segundos hasta el Examen Nacional de Ingreso a la Universidad de China. Detecta automáticamente el año del examen, soporta más de 100 años.