HTML5的翻頁效果？

Question

嗨，是否有可能像HTML5的書翻轉頁面的效果？如果是這樣怎麼辦？

在此先感謝！

Answer 1

您可以使用CSS轉換爲此。

更多信息：http://www.the-art-of-web.com/css/css-animation/

還是在這裏（目前只在WebKit瀏覽器提供）http://www.romancortes.com/blog/pure-css3-page-flip-effect/

Answer 2

可以使用jQuery插件的翻頁效果。

下面是jQuery插件的鏈接。

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

你可以找到http://builtbywill.com/code/booklet/

希望演示這將幫助。

Answer 3

這是另一個page-flip animation done with CSS Animations UPDATE：LINK BROKEN。該方法基於Roman Cortes's inspired original。

構建的方式是每個右頁在兩個div內雙重嵌套。內部div圍繞外部div內的頁面上方的旋轉點旋轉30度，以便頁面進入視圖。外部div也圍繞相同的旋轉點旋轉約15度。它配置了一個overflow：hidden，並充當內部div頁面的裁剪容器。 z-indexing用於將頁面堆疊在一起。

每個頁面都被灰色漸變不透明度漸變疊加，並在x軸上縮放，以便陰影隨着頁面的轉動而變蠟。

的代碼是一個有點複雜，但查看源代碼是非常簡單的

Answer 4

turn.js是jQuery的一個插件，創建使用HTML5非常逼真的翻頁效果，這是一個可愛的效果和插件已經寫得這麼實現和配置它的方式很簡單，而且要求不高。