¿Efecto de cambio de página para HTML5?

Question

Hola, ¿es posible tener un efecto de voltear una página como un libro para HTML5? ¿Si es así, Cómo se hace?

¡Gracias de antemano!

Answer 1

Puede usar Transformaciones CSS para esto.

Más información: http://www.the-art-of-web.com/css/css-animation/

O aquí (sólo disponible en los navegadores Webkit) http://www.romancortes.com/blog/pure-css3-page-flip-effect/

Answer 2

Puede utilizar el plugin de jQuery para el efecto tirón de la página.

A continuación se muestra el enlace al complemento de jQuery.

http://plugins.jquery.com/plugin-tags/page-flip

puede encontrar demostración en http://builtbywill.com/code/booklet/

Esperamos que esto ayude.

Answer 3

Aquí hay otra page-flip animation done with CSS Animations ACTUALIZACIÓN: ENLACE ROTO. La metodología se basa en Roman Cortes's inspired original.

La forma en que esto se construye es que cada página derecha está anidada en dos dentro de dos divisiones. El div interno se gira 30 grados alrededor de un punto de rotación sobre la página dentro de un div externo para que la página quede a la vista. El div externo también se gira a la vista alrededor del mismo punto de rotación en aproximadamente 15 grados. Está configurado con un desbordamiento: oculto y actúa como un contenedor de recorte para la página div interna. z-indexing se usa para apilar las páginas una encima de la otra.

Cada página está superpuesta y cubierta con un degradado progresivo de opacidad gris que se escala en el eje x de modo que la sombra aumenta y disminuye a medida que se gira la página.

El código es un poco más complejo, pero ver código fuente es bastante sencillo

Answer 4

turn.js es un plugin para jQuery que crea un efecto de vuelta de página muy realista usando HTML5, que es un efecto precioso y el plugin se ha escrito en tal forma en que implementarlo y configurarlo es simple y poco exigente.