用CSS3 Region和3D变换实现书籍翻页效果

前言：我曾在之前的分享里提到CSS3 Region（区域模块）的重要作用：实现更复杂的排版效果，实现更丰富的富文本体验。下文就是和此模块相关的实际应用，可以看到未来它将发挥出巨大的作用。

这一天终于到来：你开始对大段滚动的文字感到厌倦，并正在寻找一种新的格式，更加优雅，更加紧凑。它可以把长长的滚动条切分为整齐的页面并结合在一起。我把这个发明叫做“书”。

利用CSS3 Region（去CanIUse看看当前浏览器支持的情况，Chrome需要进入chrome://flags并激活CSS3 Region）和3D变换，我们终于可以在现代浏览器上实现先进的书籍效果。所有你需要的仅是几行JavaScript和一堆CSS。

让我们开始定义书籍结构。这本书由书页组成，而书页包括两面。每一面写满这本书的内容：

        我们将使用CSS Region控制文字流入书页。但是我们需要先定义这本书的内容。
        现在书已经写完了，让我们开始定义CSS流。我使用“+”字符作为占位符替换-webkit或-moz这样的浏览器前缀：
        现在来自span#book-content的内容会转而显示到div.book-pages元素里。这本书现在看起来相当差劲。为了让它看起来更美，我们需要更多努力。
        我们可能需要把HTML的结构转换为更类似于书籍的形式：
        我们完成了书籍风格的HTML页面，下面要开始添加JS。 我们必须要给这本平平的书一些合适的体积。为了增加体积，我们在Z轴上定位每一页。
        下面的代码使我们的书页平滑的显示。
        最后，为了自动翻页，我们需要绑定事件。
        最终，我们完成了这本“书”。
        你可以在这里看到示例以及源代码。如果你的浏览器不支持CSS Region，这本书会惨不忍睹，此时你可以试试这个例子 。
        译自：http://updates.html5rocks.com/2012/07/Writing-a-flippable-book-using-CSS-Regions-and-3D-transforms
        转载请注明：来自蒋宇捷的博客（http://blog.csdn.net/hfahe）