? ? ??前言：我曾在之前的[分享](http://blog.csdn.net/hfahe/article/details/7388938)里提到CSS3 Region（區域模塊）的重要作用：實現更復雜的排版效果，實現更豐富的富文本體驗。下文就是和此模塊相關的實際應用，可以看到未來它將發揮出巨大的作用。  ? ? ? 這一天終于到來：你開始對大段滾動的文字感到厭倦，并正在尋找一種新的格式，更加優雅，更加緊湊。它可以把長長的滾動條切分為整齊的頁面并結合在一起。我把這個發明叫做“書”。 ? ? ??利用CSS3 Region（去[CanIUse](http://caniuse.com/#feat=css-regions)看看當前瀏覽器支持的情況，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> ~~~ ? ? ??現在書已經寫完了，讓我們開始定義CSS流。我使用“+”字符作為占位符替換-webkit或-moz這樣的瀏覽器前綴： ~~~ #book-content { +flow-into: book-text-flow; } .book-pages { +flow-from: book-text-flow; } ~~~ ? ? ??現在來自span#book-content的內容會轉而顯示到div.book-pages元素里。這本書現在看起來相當差勁。為了讓它看起來更美，我們需要更多努力。 ? ? ??我們可能需要把HTML的結構轉換為更類似于書籍的形式： ~~~ html { width: 100%; height: 100%; } body { /* The entire body is clickable area. Let the visitor know that. */ cursor: pointer; width: 100%; height: 100%; /* Set the perspective transform for the page so that our book looks 3D. */ +perspective: 800px; /* Use 3D for body, the book itself and the page containers. */ +transform-style: preserve-3d; } .book { +transform-style: preserve-3d; position: absolute; } /* Page containers, contain the two sides of the page as children. */ .book > div { +transform-style: preserve-3d; position: absolute; } /* Both sides of a page. These are flat inside the page container, so no preserve-3d. */ .book > div > div { /* Fake some lighting with a gradient. */ background: +linear-gradient(-45deg, #ffffff 0%, #e5e5e5 100%); width: 600px; height: 400px; overflow: hidden; /* Pad the page text a bit. */ padding: 30px; padding-bottom: 80px; } /* Front of a page */ .book > div > div:first-child { /* The front side of a page should be slightly above the back of the page. */ +transform: translate3d(0px, 0px, 0.02px); /* Add some extra padding for the gutter. */ padding-left: 40px; /* Stylish border in the gutter for visual effect. */ border-left: 2px solid #000; } /* Back of a page */ .book > div > div:last-child { /* The back side of a page is flipped. */ +transform: rotateY(180deg); padding-right: 40px; border-right: 2px solid #000; } /* Front cover of the book */ .book > div:first-child > div:first-child { /* The covers have a different color. */ background: +linear-gradient(-45deg, #8c9ccc 0%, #080f40 100%); /* Put a border around the cover to make it cover the pages. */ border: 2px solid #000; /* And center the cover. */ margin-left: -1px; margin-top: -1px; } /* Back cover of the book */ .book > div:last-child > div:last-child { background: +linear-gradient(-45deg, #8c9ccc 0%, #080f40 100%); border: 2px solid #000; margin-left: -1px; margin-top: -1px; } ~~~ ? ? ??我們完成了書籍風格的HTML頁面，下面要開始添加JS。?我們必須要給這本平平的書一些合適的體積。為了增加體積，我們在Z軸上定位每一頁。 ~~~ (function() { var books = document.querySelectorAll('.book'); for (var i = 0; i < books.length; i++) { var book = books[i]; var pages = book.childNodes; for (var j = 0; j < pages.length; j++) { if (pages[j].tagName == "DIV") { setTransform(pages[j], 'translate3d(0px, 0px, ' + (-j) + 'px)'); } } } })(); ~~~ ? ? ??下面的代碼使我們的書頁平滑的顯示。 ~~~ .book > div { +transition: 1s ease-in-out; } ~~~ ? ? ??最后，為了自動翻頁，我們需要綁定事件。 ~~~ (function(){ // Get all the pages. var pages = document.querySelectorAll('.book > div'); var currentPage = 0; // Go to previous page when clicking on left side of window. // Go to the next page when clicking on the right side. window.onclick = function(ev) { if (ev.clientX < window.innerWidth/2) { previousPage(); } else { nextPage(); } ev.preventDefault(); }; var previousPage = function() { if (currentPage > 0) { currentPage--; // Rotate the page to closed position and move it to its place in the closed page stack. setTransform(pages[currentPage], 'translate3d(0px,0px,' + (-currentPage) + 'px) rotateY(0deg)'); } }; var nextPage = function() { if (currentPage < pages.length) { // Rotate the page to open position and move it to its place in the opened stack. setTransform(pages[currentPage], 'translate3d(0px,0px,' + currentPage + 'px) rotateY(-150deg)'); currentPage++; } }; })(); ~~~ ? ? ??最終，我們完成了這本“書”。 ? ? ??你可以在[這里](http://kig.github.com/html-book)看到示例以及[源代碼](http://github.com/kig/html-book)。如果你的瀏覽器不支持CSS Region，這本書會慘不忍睹，此時你可以試試[這個例子](http://kig.github.com/html-book/no_regions.html)?。  ? ? ? 譯自：[http://updates.html5rocks.com/2012/07/Writing-a-flippable-book-using-CSS-Regions-and-3D-transforms](http://updates.html5rocks.com/2012/07/Writing-a-flippable-book-using-CSS-Regions-and-3D-transforms) ? ? ??轉載請注明：來自蔣宇捷的博客（http://blog.csdn.net/hfahe）