Flipbook 3D — Editor & Libro Descargable

Un editor de flipbooks con animación de volteo 3D real, completamente en un solo archivo HTML — sin dependencias, sin servidor, sin instalación.

Características

Editor (`index3D.html`)

Carga de imágenes por selección de archivo, arrastrar y soltar, o URL externa
Ordenación automática de archivos por nombre (orden numérico natural)
Proporción de página configurable: 3:4 · 4:3 · 1:1
Vista previa en tiempo real con navegación por flechas, teclas de teclado y puntos de navegación
Botones de esquina en hover para pasar páginas
Portada mostrada como página individual centrada; resto del libro en spreads de dos páginas
Barra de progreso durante la conversión y generación del libro
Descarga del libro completo como archivo HTML autocontenido

Libro descargado (`flipbook.html`)

Animación 3D real — cada hoja gira desde el lomo con rotateY y preserve-3d, con manejo correcto de z-index durante el volteo y el retroceso
Profundidad sin barra de lomo — sombras degradadas multicapa en los bordes interiores simulan la curvatura de las páginas hacia el pliegue
Lightbox al clic — clic en cualquier página la amplía en pantalla completa con fondo desenfocado, botón de cierre y soporte para tecla Escape
Totalmente responsive — el tamaño del libro se calcula en cada render y resize para ajustarse a cualquier pantalla
Sin dependencias — todo el contenido (imágenes en base64) queda embebido en un único .html portable

Cómo usar

Abrir index3D.html en cualquier navegador moderno
Añadir imágenes (archivos locales, arrastrar o URL)
Elegir la proporción de página si es necesario
Navegar el libro en el editor para verificar el orden
Pulsar ⬇ Descargar libro — se genera y descarga flipbook.html
Abrir flipbook.html directamente en el navegador (no requiere servidor)

Navegación

Acción	Editor	Libro descargado
Página siguiente	`→` / `↓` / flecha derecha / esquina inferior izquierda	`→` / `↓` / botón `→`
Página anterior	`←` / `↑` / flecha izquierda / esquina inferior derecha	`←` / `↑` / botón `←`
Ir a spread concreto	Clic en punto de navegación	Clic en punto de navegación
Ampliar imagen	—	Clic en la página
Cerrar ampliación	—	Clic en la imagen, en el fondo o `Escape`

Arquitectura del libro 3D

El libro usa un modelo de hojas físicas con dos caras:

Hoja i:
  front = IMGS[2·i]     → página derecha del spread i (visible antes de girar)
  back  = IMGS[2·i+1]   → página izquierda del spread i+1 (visible tras girar)

Cuando la hoja i gira (rotateY(-180deg)), su cara back queda expuesta a la izquierda y el front de la hoja i+1 queda visible a la derecha — formando el spread i+1 de manera orgánica, sin necesidad de divs estáticos adicionales para la página izquierda.

El z-index se gestiona dinámicamente: la hoja en movimiento se eleva durante la animación y se restaura al estado estable al finalizar, garantizando el orden visual correcto tanto al avanzar como al retroceder.

Estructura del proyecto

index3D.html      → Editor completo (un solo archivo)
flipbook.html     → Libro generado (un solo archivo, portable)
README.md         → Este documento

Compatibilidad

Probado en navegadores modernos con soporte de transform-style: preserve-3d y backface-visibility:

Chrome / Edge 90+
Firefox 90+
Safari 15+

No requiere servidor web — funciona directamente desde el sistema de archivos (file://).

Limitaciones conocidas

El tamaño del archivo generado crece proporcionalmente al número y resolución de las imágenes (todas embebidas en base64)
Las imágenes cargadas por URL externa deben permitir CORS para ser embebidas correctamente; en caso contrario se incluye la URL original
La animación 3D puede verse afectada en dispositivos con GPU limitada o con prefers-reduced-motion activo (no se aplica automáticamente en esta versión)