用CSS3 Region跟3D变换实现书籍翻页效果
日期：2014-05-17 浏览次数：20877 次
用CSS3 Region和3D变换实现书籍翻页效果
前言：我曾在之前的分享里提到CSS3 Region（区域模块）的重要作用：实现更复杂的排版效果，实现更丰富的富文本体验。下文就是和此模块相关的实际应用，可以看到未来它将发挥出巨大的作用。
这一天终于到来：你开始对大段滚动的文字感到厌倦，并正在寻找一种新的格式，更加优雅，更加紧凑。它可以把长长的滚动条切分为整齐的页面并结合在一起。我把这个发明叫做“书”。
利用CSS3 Region（去CanIUse看看当前浏览器支持的情况，Chrome需要进入chrome://flags并激活CSS3 Region）和3D变换，我们终于可以在现代浏览器上实现先进的书籍效果。所有你需要的仅是几行JavaScript和一堆CSS。
让我们开始定义书籍结构。这本书由书页组成，而书页包括两面。每一面写满这本书的内容：
<div class="book">
<div> <!-- first page -->
<div> <!-- front cover -->
<h1>My Fancy Book</h1>
</div>
<div> <!-- backside of cover -->
<h1>By Me I. Myself</h1>
<h2>2012 Bogus HTML Publishing Ltd</h2>
</div>
</div>
<!-- content pages -->
<div>
<!-- front side of page -->
<div class="book-pages"></div>
<!-- back side of page -->
<div class="book-pages"></div>
</div>
<div>
<div class="book-pages"></div>
<div class="book-pages"></div>
</div>
<div>
<div class="book-pages"></div>
<div class="book-pages"></div>
</div>
</div>我们将使用CSS Region控制文字流入书页。但是我们需要先定义这本书的内容。
<span id="book-content"> blah blah blah ... </span>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
