Schreiben eines drehbaren Buchs mithilfe von CSS-Regionen und 3D-Transformationen

Ilmari Heikkinen

Der Tag ist nun gekommen. Endlich langweilig sind lange Scrollen durch Text und du bist auf der Suche nach einem neuen Format. Etwas Elegantes. Etwas Kompaktes. Etwas, das lange gescrollt wird, zerschneidet es in kleine Rechtecke und bindet sie zusammen. Ich nenne diese Erfindung das „Buch“.

Dank der leistungsstarken CSS-Regionen (CanIUse, unter chrome://flags CSS-Regionen aktivieren) und CSS-3D-Transformationen ist die innovative Buchtechnologie endlich in modernen Browsern verfügbar. Sie benötigen lediglich ein paar Zeilen JavaScript und eine Menge CSS.

Beginnen wir mit der Definition unserer Buchstruktur. Das Buch besteht aus Seiten, die aus zwei Seiten bestehen. Die Seiten enthalten den Buchinhalt:

<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>

Wir verwenden CSS-Regionen, um den Buchtext in die Buchseiten einfließen zu lassen. Aber zuerst benötigen wir den Buchtext.

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

Nachdem wir nun unser Buch geschrieben haben, definieren wir den CSS-Ablauf. Ich verwende das Pluszeichen als Platzhalter für das Anbieterpräfix. Ersetzen Sie es durch -webkit- für WebKit-Browser, -moz- für Firefox usw.:

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

Nun wird der Inhalt des #book-content-Spans stattdessen in die .book-pages-Divs eingefügt. Dieses Buch ist jedoch eher schlecht. Für ein literarischer Buch müssen wir uns auf eine Mission begeben. Unser Weg führt über die Regenbogenbrücke der CSS-Transformationen zum Uhrwerk-Königreich von JavaScript. In den Hallen der Mechaniker-Fairylords entfesseln wir epische Übergangsmagien und erhalten die drei sagenhaften Tasten, die die Benutzeroberfläche über die Welt steuern.

Der Hüter der Regenbogenbrücke vermittelt uns die Weisheit stilvoller Strukturselektoren, mit denen wir unsere HTML-Buchstruktur in eine buchartigere Form verwandeln können:

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;
}

Durch die Erstellung eines papierförmigen Stils für unseren HTML-Code erreichen wir die Billionen Zahnräder des JavaScript-Königreichs. Um durch das Tor zu gelangen, müssen wir unser Flachbuch in einen richtigen Band verwandeln. Um dem Buch etwas Volumen zu verleihen, setzen wir jede Seite leicht auf der Z-Achse.

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

Übergänge zu zaubern, um die Fairylords zu beeindrucken, ist nicht die schwierigste Methode. Dennoch sorgen die Ergebnisse dafür, dass die Seiten unseres Buchs das Drehen des Buchs reibungslos animieren.

.book > div {
    +transition: 1s ease-in-out;
}

Damit sich die Seiten tatsächlich drehen, müssen wir die Ereignisse selbst an unsere Sache binden.

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

Damit haben wir die Buchtechnologie erworben und können die Kristalltürme evakuieren und ihre grelle Blendung und die brennenden Atomfeuer von Achenar, den großen blauen Stern der Überwelt, zurücklassen. Wir kehren triumphierend in unser Zuhause zurück und schweben unsere Bücher hoch über uns, bereit für die unvermeidliche Kaskade von Paraden und Feiern zu unseren Ehre.

Sie können sich online ein Beispiel ansehen und die vollständige Quelle für die Beispiele abrufen. Wenn Sie in Ihrem Browser keine CSS-Regionen haben, sieht das Beispiel ziemlich fehlerhaft aus. In diesem Fall können Sie es stattdessen mit diesem Beispiel versuchen.