CSS Retournement de la Page Effet

Je suis en train de construire une application web avec un effet similaire à FlipBoard.

Au premier abord, j'ai essayé d'utiliser open source. Mais je n'aime pas vraiment la façon dont il est mis en œuvre (créer un duplicata pour chaque page et se superposent les uns aux autres lors de la rotation)... en plus, quand j'ai ajouter du contenu dynamique à l'intérieur de chaque page, le retournement de l'effet devient très fragile...

Alors maintenant, je vais mettre mon propre retournement effet avec css et javascript..

La structure de la page, c'est comme cela

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

Lorsque le retournement est déclenchée... je n'ai la suite... MAIS je trouve pas ça élégant car ses supposés être lisse 180 ° rotation plutôt que de casser l'action en deux.. le problème que j'ai est le z-index.. après la rotation -90deg, je veux le "retour" de la page à afficher sur le dessus sinon il sera toujours le "front" de côté...

    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);
InformationsquelleAutor xialin | 2013-10-14
  1. 1

    Essayez cette "Turnjs" c'est une simple API Javascript qui permet à l'envers de la page: en effet, les

    Turnjs

    Il est très facile à utiliser et un exemple simple comme indiqué dans le site web est: est-ce

    <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>
    InformationsquelleAutor