CSS翻頁效果

Question

我正在構建一個類似於FlipBoard的網頁應用程序。我想嘗試使用this open source。但我不太喜歡它的實現方式（爲每個頁面創建重複項，並在旋轉時互相重疊）...另外，當我在每個頁面內添加動態內容時，翻轉效果變得非常不穩定...

所以現在我實現與CSS和JavaScript我自己的翻轉效果..

的頁面結構是這樣的

<div class="page" id="page1"> 
    <div class="inner"></div> 
</div> 
<div class="page" id="page2"> 
    <div class="inner"></div> 
</div> 

當翻轉觸發......我做了以下... BUT我覺得它不是優雅的，因爲它應該是一個平滑的180度旋轉，而不是將動作分成兩部分。這個問題我已經是z-index的..旋轉-90deg後，我想「回」頁顯示在上面，否則這將是永遠的「正面」 ......

var front = '<div class="front" style="clip: rect(0px, 2229px, 1315px, 1115px);">' + $('#page2').children('.megafolio-container').html() + '</div>'; 
    var back = '<div class="back megafolio-container" style="clip: rect(0px, 2229px, 1315px, 1115px);">' + $('#page3').children('.megafolio-container').html() + '</div>'; 
    var middle = '<div class="middle page"></div>'; 
    $('.container').append(middle); 
    $('.middle').html(front + back); 
    $('.middle').height($(window).height()); 
    $('.middle').width($(window).width()); 
    $('.middle').css('-webkit-transform', 'rotateY(-90deg)'); 
    $('.middle').css('-webkit-transition', '-webkit-transform 500ms linear'); 
    setTimeout(function(){ 
     $('.middle > .back').css('z-index', 10); 
     $('.middle').css('-webkit-transform', 'rotateY(-180deg)'); 
     $('.middle').css('-webkit-transition', '-webkit-transform 500ms linear'); 
    }, 500); 

Answer 1

也許這可以幫助你：http://www.jqueryrain.com/2012/12/best-jquery-page-flip-book-effect-with-examples/

祝你好運;）

Answer 2

試試這個 「Turnjs」 這是一個簡單的JavaScript API，它能夠使網頁翻頁效果：

Turnjs

這是非常容易使用，並在該網站給出的一個簡單的例子是這樣的：

<div id="flipbook"> 
<div class="hard"> Turn.js </div> 
<div class="hard"></div> 
<div> Page 1 </div> 
<div> Page 2 </div> 
<div> Page 3 </div> 
<div> Page 4 </div> 
<div class="hard"></div> 
<div class="hard"></div> 

<script type="text/javascript"> 
    $("#flipbook").turn({ 
     width: 400, 
     height: 300, 
     autoCenter: true 
    }); 
</script>