用CSS3 Region和3D變換實現書籍翻頁效果

jopen 12年前發布 | 34K 次閱讀 CSS3 CSS 前端技術

前言：我曾在之前的分享里提到CSS3 Region（區域模塊）的重要作用：實現更復雜的排版效果，實現更豐富的富文本體驗。下文就是和此模塊相關的實際應用，可以看到未來它將發揮出巨大的作用。

這一天終于到來：你開始對大段滾動的文字感到厭倦，并正在尋找一種新的格式，更加優雅，更加緊湊。它可以把長長的滾動條切分為整齊的頁面并結合在一起。我把這個發明叫做“書”。

利用CSS3 Region（去CanIUse看看當前瀏覽器支持的情況，Chrome需要進入chrome://flags并激活CSS3 Region）和3D變換，我們終于可以在現代瀏覽器上實現先進的書籍效果。所有你需要的僅是幾行JavaScript和一堆CSS。

用CSS3 Region和3D變換實現書籍翻頁效果

讓我們開始定義書籍結構。這本書由書頁組成，而書頁包括兩面。每一面寫滿這本書的內容：

<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++;
      }
    };
})();

最終，我們完成了這本“書”。

你可以在這里看到示例以及源代碼。如果你的瀏覽器不支持CSS Region，這本書會慘不忍睹，此時你可以試試這個例子。

用CSS3 Region和3D變換實現書籍翻頁效果

譯自：http://updates.html5rocks.com/2012/07/Writing-a-flippable-book-using-CSS-Regions-and-3D-transforms

轉載請注明：來自蔣宇捷的博客（http://blog.csdn.net/hfahe）

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1342103430937.html

CSS3 CSS 前端技術

用CSS3 Region和3D變換實現書籍翻頁效果

相關經驗

相關資訊

相關文檔

目錄