CSS Regions と 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 の精巧な王国へと続くものです。機械主義の妖精王のホールで、壮大な移行魔法を解き放ち、オーバーワールド インターフェースを制御する伝説の 3 つの鍵を入手します。

虹の橋の守護者は、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 王国の 100 兆ギアの門に到達します。ゲートを通過するには、平らな書籍を適切な書籍にする必要があります。書籍に厚みを持たせるために、各ページを 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 リージョンがない場合、この例は非常に不格好に見えます。その場合は、代わりにこちらの例をお試しください。