Efekt odwracania strony dla HTML5?

Question

Witam, czy można uzyskać efekt przewracania strony jak książki dla HTML5? Jeśli tak, to jak to się robi?

Z góry dziękuję!

Answer 1

Możesz użyć do tego transformacji CSS.

Więcej informacji: http://www.the-art-of-web.com/css/css-animation/

lub tutaj (tylko aktualnie dostępne w przeglądarkach WebKit) http://www.romancortes.com/blog/pure-css3-page-flip-effect/

Answer 2

Można użyć wtyczki jQuery dla efektu stronę odwrotną.

Poniżej znajduje się link do wtyczki jQuery.

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

można znaleźć demo na http://builtbywill.com/code/booklet/

nadzieję, że to pomoże.

Answer 3

Oto kolejna page-flip animation done with CSS Animations UPDATE: LINK BROKEN. Metodologia oparta jest na Roman Cortes's inspired original.

Sposób, w jaki jest to skonstruowane, polega na tym, że każda prawa strona jest podwójnie zagnieżdżona wewnątrz dwóch elementów div. Wewnętrzny div jest obrócony o 30 stopni wokół punktu obrotu nad stroną wewnątrz zewnętrznego div, tak aby strona została wyświetlona. Zewnętrzny div jest również obracany do widoku wokół tego samego punktu obrotu o około 15 stopni. Jest skonfigurowany z przepełnieniem: ukryty i działa jako kontener przycinający dla wewnętrznej strony div. Indeksowanie z-Z służy do układania stron jedna na drugiej.

Każda strona jest nakładana i pokryta szarym progresywnym gradientem nieprzezroczystości, który jest skalowany na osi X, aby cień wracał i zmniejszał się w miarę obracania strony.

Kod jest trochę skomplikowany, ale źródłowy jest całkiem prosta

Answer 4

turn.js jest plugin do jQuery, który tworzy bardzo realistyczne strona turze efekt przy użyciu HTML5, jest to piękny efekt i plugin został napisany w taki sposób, w jaki implementacja i konfiguracja jest prosta i mało wymagająca.