CSS Flipping Page Effect

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> 

Когда листать запускаются ... Я следующий ... НО Я считаю, что это не изящно, потому что должен быть гладким 180 вращением, а не разбивать действие на два. проблема у меня есть, г-индекс .. после поворота -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>