نوشتن یک کتاب قابل چرخش با استفاده از مناطق CSS و تبدیل های سه بعدی

Ilmari Heikkinen

بنابراین. روز فرا رسیده است. بالاخره از طومارهای طولانی متن خسته شده اید و به دنبال قالب جدیدی هستید. یه چیز شیک یه چیز جمع و جور چیزی که طومار طولانی را می گیرد، آن را به مستطیل های کوچک و منظم برش می دهد و آنها را به هم می چسباند. من این اختراع را "کتاب" می نامم.

با قدرت مناطق CSS ( CanIUse ، به chrome://flags بروید و مناطق CSS را فعال کنید) و تبدیل‌های سه بعدی CSS، بالاخره فناوری کتاب‌های پیشرفته در مرورگرهای مدرن در دسترس است. تنها چیزی که نیاز دارید چند خط جاوا اسکریپت و مقدار زیادی 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، -moz- برای فایرفاکس و غیره جایگزین کنید:

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

اکنون محتوای #book-content span به‌جای آن به بخش‌های .book-pages می‌رود. اگرچه این کتاب نسبتاً ضعیفی است. برای کتابی بیشتر کتابی باید دست به تلاشی بزنیم. سفر ما از طریق پل رنگین کمان تبدیل CSS به قلمرو ساعتی جاوا اسکریپت منتهی خواهد شد. در تالارهای اربابان پریان مکانیست، جادوهای انتقال حماسی را آزاد خواهیم کرد و سه کلید افسانه‌ای را به دست خواهیم آورد که رابط جهان را کنترل می‌کنند.

نگهبان پل رنگین کمان، حکمت انتخابگرهای ساختاری شیک را به ما می دهد تا بتوانیم ساختار کتاب 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 خود، به دروازه‌های تریلیون‌ها در قلمرو جاوا اسکریپت می‌رسیم. برای عبور از دروازه، باید کتاب تخت خود را به یک جلد مناسب تبدیل کنیم. برای افزودن مقداری حجم به کتاب، هر صفحه را کمی در محور 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 در مرورگر خود ندارید، مثال کاملاً شکسته به نظر می رسد. در این صورت می توانید این مثال را به جای آن امتحان کنید.