javascript CSS 翻页效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19361541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Flipping Page Effect
提问by xialin
I'm building an web application with effect similar to FlipBoard.
我正在构建一个效果类似于 FlipBoard 的 Web 应用程序。
At first, I was trying to use this open source. But I don't really like the way it's implemented (create duplicates for each page and overlap each other when rotate)... plus, when I add dynamic content inside each page, the flipping effect becomes very shaky...
起初，我试图使用这个开源. 但我真的不喜欢它的实现方式（为每个页面创建副本并在旋转时相互重叠）......此外，当我在每个页面中添加动态内容时，翻转效果变得非常不稳定......
So now I'm implementing my own flipping effect with css and javascript..
所以现在我正在用 css 和 javascript 实现我自己的翻转效果..
The page structure is like this
页面结构是这样的
<div class="page" id="page1">
<div class="inner"></div>
</div>
<div class="page" id="page2">
<div class="inner"></div>
</div>
When the flipping is triggered... I did the following... BUT I find it not elegant because its supposed to be a smooth 180 rotation rather than breaking the action into two..the problem I have is the z-index.. after rotating -90deg, I want the "back" page to show on top otherwise it will be always the "front" side...
当翻转被触发时......我做了以下......但我发现它并不优雅，因为它应该是一个平滑的 180 度旋转而不是将动作分成两个......我的问题是 z-index..旋转 -90 度后，我希望“背面”页面显示在顶部，否则它将始终位于“正面”一侧...
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);
回答by xialin
Try this "Turnjs" it is a simple Javascript API which enables the flip page effect:
试试这个“ Turnjs”，它是一个简单的 Javascript API，可以实现翻页效果：
It is very easy to use and one simple example as given in the website is this:
它非常易于使用，网站中给出的一个简单示例是：
<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>
