使用 CSS 区域和 3D 转换编写可翻页书

Ilmari Heikkinen

那一天终于到了。您终于厌倦了长篇幅的滚动文本，想要尝试新的内容形式。优雅的照片。体积较小。将长滚动条截断成整齐的小矩形并将其绑定在一起。我将这项发明称为“图书”。

借助强大的 CSS 区域（CanIUse，前往 chrome://flags 并启用 CSS 区域）和 CSS 3D 转换，现代浏览器终于可以使用尖端的图书技术了。您只需几行 JavaScript 代码和大量 CSS 代码即可。

首先，我们来定义图书结构。图书由页面组成，页面由两面组成。侧边包含图书内容：

<div class="book">
    <div> <!-- first page -->
    <div> <!-- front cover -->
        # My Fancy Book
    </div>
    <div> <!-- backside of cover -->
        # By Me I. Myself
        ## 2012 Bogus HTML Publishing Ltd
    </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 区域将图书文本流入图书页面。不过，我们首先需要图书文本。

<span id="book-content">
    blah blah blah ...
</span>

现在，我们已经编写好了图书，接下来来定义一下流程 CSS。我将“+”字符用作供应商前缀占位符，将其替换为 WebKit 浏览器的 -webkit-、Firefox 的 -moz- 等：

#book-content {
    +flow-into: book-text-flow;
}
.book-pages {
    +flow-from: book-text-flow;
}

现在，#book-content span 中的内容将改为进入 .book-pages div。不过，这本书很差。为了获得更像图书的图书，我们必须踏上征途。我们的旅程将跨越 CSS 转换的彩虹桥，前往 JavaScript 的齿轮王国。在机械仙王的宫殿中，我们将施展史诗般的转场魔法，并获得传说中用于控制地表界面的三把钥匙。

彩虹桥的守护者向我们传授了时尚结构选择器的智慧，以便我们将 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 创建了一种类似于纸张的样式，我们就来到了 JavaScript 王国的万亿齿轮大门。为了通过闸门，我们必须将平放的照片书折叠成合适的体积。为了让图书看起来更厚实，我们在 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++;
        }
    };
})();

这样一来，我们就掌握了“书”技术，可以撤离上层世界水晶塔，远离其刺眼的光芒和上层世界枢纽的巨大蓝色恒星 Achenar 的猛烈核火。我们胜利地回到家中，高举着书本，准备迎接为我们举行的不可避免的一系列游行和庆祝活动。

您可以在线点击此处查看示例，并获取示例的完整源代码。如果您的浏览器中没有 CSS 区域，该示例将看起来非常破碎。在这种情况下，您可以改为尝试此示例。