Флип-эффект страницы для HTML5?

Ответ 1

Вот еще одна анимация переворота страницы, выполненная с помощью CSS-анимации ОБНОВЛЕНИЕ: ЗАМЕНЕННАЯ ССЫЛКА С ARCHIVE.ORG URL. Методология основана на оригинальном римском Кортесе.

Способ, которым это построено, состоит в том, что каждая правая страница является двойной вложенностью в двух div. Внутренний блок поворачивается на 30 градусов вокруг точки вращения над страницей внутри внешнего блока, так что страница отображается. Внешний div также вращается вокруг этой же точки вращения примерно на 15 градусов. Он настроен с переполнением: скрытый и действует как контейнер отсечения для внутренней страницы div. z-индексация используется для укладки страниц друг на друга.

На каждую страницу накладывается серый прогрессивный градиент непрозрачности, который масштабируется по оси x, так что тень нарастает и убывает при переворачивании страницы.

Код немного сложен, но вид источника довольно прост

Ответ 2

Вы можете использовать плагин jQuery для эффекта переворота страницы.

Ниже приведена ссылка на плагин jQuery.

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

Вы можете найти демо на http://builtbywill.com/code/booklet/

Надеюсь, это поможет.

Ответ 3

Для этого вы можете использовать CSS Transformations.

Дополнительная информация: http://www.the-art-of-web.com/css/css-animation/

Или здесь (доступно только в настоящее время в браузерах Webkit) http://www.romancortes.com/blog/pure-css3-page-flip-effect/

Ответ 4

turn.js является плагином для jQuery, который создает очень реалистичный эффект поворота страницы, используя HTML5, его прекрасный эффект и плагин был написанный таким образом, что его реализация и конфигурирование просты и нетребовательны.